Try ShortPoint nowIn this article, we will show you how to automatically open a popup window/lightbox once the page is loaded, based on some condition. This tutorial might be helpful for you if you would like to display a message if some condition is true (for example, when you have any pending tasks in the task list).
As an example, we will explain how to show a popup when you have any tasks due today. This is how it may look like:
Please note that you can also use the logic according to your requirements. For doing that, you simply need to construct your own REST API query yourself.
Note: If you would like to open a popup automatically and every time the user opens/reloads it, please follow our article on How to Automatically Open a Lightbox/Popup When the Page Loads.
Before we begin
This solution is only applicable for Classic SharePoint experience.
Step 1. Add a ShortPoint Design Element with a Lightbox Linking Option
Add any ShortPoint Design Element that supports adding links to your page that supports adding links.
For the purpose of this article, we will use Button Design Element.
In the Settings tab, specify the Link pointing to the source of the content (page, image, animation etc.) that you want to open automatically on a page load. Set the Linking option to lightbox:
Step 2. Set an ID for the ShortPoint Design Element
For the same Design Element added in the previous step, switch to the Custom CSS tab, and add an ID openMe to the respective ID field:
Note: If the ShortPoint Design Element that has your popup link resides inside the Items/Tiles tab (for example, Slideshows), you need to set the ID from the Items/Tiles tab, not from the Custom CSS tab. Click Enable Custom Settings and add the ID there:
Then, click Insert/Update to add/update this Design Element.
Step 3. Add Custom JavaScript to automatically click your link
So far, we have created a link that will open in a popup once you click it. The last step is to make it open automatically once the page is loaded. To do that, copy the following code:
<script type="text/javascript">
function getTodayISO() {
var d = new Date();
// no need of time here
d.setUTCHours(0,0,0,0);
return d.toISOString();
}
function getTomorrowISO() {
var d = new Date();
d.setDate(d.getDate() + 1);
// no need of time here
d.setUTCHours(0,0,0,0);
return d.toISOString();
}
function AnyOverdueTasks() {
var $ = shortpoint.$;
var dfd = $.Deferred();
var requestUrl = _spPageContextInfo.webAbsoluteUrl + '/_api/web/lists/getbytitle(\'Tasks\')/items?$select=Id,Title,StartDate,DueDate&$filter=(DueDate ge datetime\'' + getTodayISO() + '\' and DueDate lt datetime\'' + getTomorrowISO() + '\')&$top=1';
return $.ajax({
url: requestUrl ,
method: 'GET',
headers: { 'Accept': 'application/json; odata=verbose' },
success: function (data) {
if (data.d.results.length > 0 ) {
dfd.promise(true);
//This section can be used to iterate through data and show it on screen
}
},
error: function (data) {
dfd.promise(false);
}
})
return dfd.promise();
}
(function() {
/**
* hook method to be executed as soon as shortpoint
* rendered on the page
*/
function ShortPointReady() {
var anyOverdueTasks = AnyOverdueTasks();
anyOverdueTasks.then(function(anyTasks) {
if(anyTasks){
shortpoint.$('#openMe').click();
}
});
}
// shortpoint not yet available in the page
// wait for shortpoint render dom event
document.addEventListener( 'shortpoint-render-above-fold', function() {
// exit on edit mode
if( window.shortPointInserter ) {
return;
}
setTimeout( ShortPointReady , 500);
});
})();
</script>As you can see in above script, popup will only open when AnyOverdueTasks method returns true.
Depending on the SharePoint environment you are using, choose the next option:
Option 1. For SharePoint 2019 and Office 365 Environments
Add a Code Design Element and paste the copied code to the HTML field, and click Insert/Update to add/update the Design Element to the page:
Note: To know more about Code Design Element and how to use it, check our solution articles: - Introducing ShortPoint Code Design Element - Example Use Cases for ShortPoint Code Design Element: Part 1 - Example Use Cases for ShortPoint Code Design Element: Part 2
Option 2. For SharePoint 2016 and SharePoint 2013 Environments
Add a SharePoint OOTB Script Editor Web Part to the page, and paste the copied code there.
Finally, save your page.
Result
That's it! The popup will open automatically when you have any task due today:
Related articles:
