Try ShortPoint nowWant to add a touch of personalization to your SharePoint pages? You can easily do that with the Code Design Element. With it, you can display a dynamic greeting that automatically updates depending on who’s viewing the page and what time of day it is:
Follow the interactive tutorial or the step-by-step guide to learn how you can apply this solution to your own pages.
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have the Row/Content-holder Design Element that you want to use to add the dynamic greeting to your SharePoint page.
Interactive Tutorial
Start the interactive tutorial to add personalized greetings on your page:
Below are the codes you’ll need to accomplish the steps:
- HTML Code:
<div id="dynamicGreeting" style="font-size: 1.5rem; font-weight: bold; color: #FFFFFF;"></div>
NOTEYou can customize the font-size, font-weight, and color values according to your preferences.
- JavaScript Code:
(function() {
function getFirstName(fullName) {
if (!fullName) return "there";
// Handle "Lastname, Firstname" and "Firstname Lastname"
if (fullName.includes(',')) {
return fullName.split(',')[1].trim().split(' ')[0];
} else {
return fullName.split(' ')[0];
}
}
function getGreeting() {
const hour = new Date().getHours();
if (hour < 12) return "Good morning";
if (hour < 18) return "Good afternoon";
return "Good evening";
}
function showGreeting() {
if (typeof _spPageContextInfo === 'undefined' || !_spPageContextInfo.userDisplayName) {
setTimeout(showGreeting, 200);
return;
}
const fullName = _spPageContextInfo.userDisplayName;
const firstName = getFirstName(fullName);
const greeting = getGreeting();
document.getElementById("dynamicGreeting").textContent = `${greeting}, ${firstName}!`;
}
showGreeting();
})();Step-by-step Tutorial
Follow the detailed guide below to learn how to add a personalized greeting to your page:
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit:
- Close the Toolbox:
- Edit the ShortPoint web part:
Step 2: Add the Code Design Element
NOTEBefore proceeding, decide where you want to insert the dynamic greeting. You can add it directly inside any Row or inside any Content Holder Design Element, such as Panel, Info, Alert, Note, etc. For this guide, we'll place it inside this highlighted Row.
- Click the plus icon to open the library of Design Elements:
- Look for Code and select it.
Step 3: Copy HTML Code
- Copy the HTML code below:
<div id="dynamicGreeting" style="font-size: 1.5rem; font-weight: bold; color: #FFFFFF;"></div>
NOTEYou can customize the font-size, font-weight, and color values according to your preferences.
Step 4: Paste HTML code
- Paste the HTML code in the HTML field:
Step 5: Copy JavaScript Code
- Copy the JavaScript code below:
(function() {
function getFirstName(fullName) {
if (!fullName) return "there";
// Handle "Lastname, Firstname" and "Firstname Lastname"
if (fullName.includes(',')) {
return fullName.split(',')[1].trim().split(' ')[0];
} else {
return fullName.split(' ')[0];
}
}
function getGreeting() {
const hour = new Date().getHours();
if (hour < 12) return "Good morning";
if (hour < 18) return "Good afternoon";
return "Good evening";
}
function showGreeting() {
if (typeof _spPageContextInfo === 'undefined' || !_spPageContextInfo.userDisplayName) {
setTimeout(showGreeting, 200);
return;
}
const fullName = _spPageContextInfo.userDisplayName;
const firstName = getFirstName(fullName);
const greeting = getGreeting();
document.getElementById("dynamicGreeting").textContent = `${greeting}, ${firstName}!`;
}
showGreeting();
})();Step 6: Paste the JavaScript Code
- Paste the JavaScript code in the JavaScript field:
Step 7: Disable Sandbox Mode
- Go to the Design tab.
- Disable Sandbox Mode:
- Once satisfied, click the green check mark.
Step 8: Save and Publish
- Click the eye icon to see your page in real-time:
- Save your changes:
- Publish your page:
Congratulations! You now have a personalized greeting that automatically updates based on the person viewing the page and the time of day.
Design Ideas
To help you get started, we’ve compiled some design options for your dynamic greeting. Feel free to customize these designs as you see fit.
Design 1
This is the design we used in the tutorial. To achieve this, simply add a background to a Row and insert the dynamic greeting inside.
Design 2
Like Design 1, this option has a background image added to the Row. However, instead of directly adding the dynamic greeting inside, we used a Panel to add another pop of color.
Design 3
For this design, we used the Info Design Element and added the dynamic greeting inside using the Code Design Element.
Design 4
To achieve this look, simply use the Note Design Element and add the dynamic greeting inside using the Code Design Element.
Design 5
Recreate this design by using the Alert Design Element. Then, add the dynamic greeting inside using the Code Design Element.
Related articles:
