Zoho Creator: info/alert/modal/popup notification for any user

So I thought I'd write a quick article to remind me and to develop a simple notification system that will popup for any user on the submit of a form, or on the click of a button or on the click of a link on a page.

Because alert (alert task) can only be used on a load of a form, on a change of a field or on the validate process. And because info can only be displayed to an admin and even in some cases only as an additional link in the form. The example below is for use in a customer portal on the click of a report button (report workflow).

This will create a popup using the built-in popup of Zoho creator and gives you the freedom to style the notification as any modal would.

1. Create a page
This will be the page containing the styled modal. I'm going to call it "Notify". Add the 2 parameters p_NotifyTitle and p_NotifyContent to the page:
Page Properties - Add Parameters
Then drag a HTML snippet onto the page with the following:
	v_Title = ifnull(p_NotifyTitle,"");
	v_Text = ifnull(p_NotifyContent,"");
	/* optional: hide some of the wrapper div boxes: leaves a modal with rounded corners */
	.zc-pb-tile-card{padding: 0px 20px 10px;}
	/* optional: move the close button to the top right of the modal */
	.popupClose{position:relative !important;z-index:1000;top:28px;right:46px !important;}
	.fa.fa-close::before,.fa.fa-close::after{background:#999 !important;}

2. Trigger the notication
There are several ways to display this as a popup, the first use example is on report workflow (click of a button in a report row) but I've also used this on the submission of a stateless form, in deluge:
v_nTitle = encodeUrl("Test");
v_nText = encodeUrl("Test Content");
openUrl( "#Page:Notify?p_NotifyTitle="+v_nTitle+"&p_NotifyContent="+v_nText+"", "popup window", "height=150,width=300");
Zoho Creator: Modal Notification

If you want to do this on the click of a link, include the URL parameter zc_LoadIn=dialog:
<a href="#Page:Notify?zc_LoadIn=dialog&p_NotifyTitle=Test&p_NotifyContent=Test%20Content">Click Here to Popup my Notification Dialog</a>

This is optional but it allows your client/users to edit the text of any notification without knowing any code and without needing to use your creator knowledge. I haven't been using this because I edit the content based on the action using values from the form invoking it but for generic messages you could get the "Notify" page to read from a form/report:
  1. Click on the plus icon to create a new form
  2. Select a blank form, let's call it "Notifications".
  3. Drag a single-line field and a multi-line field onto the form called "Title" and "Content" respectively.
  4. If you use this method to populate your notifications, you can send the ID of the record to show
  5. On the Creator page, retrieve the title and content of the modal dialog from the record by using the following:
    v_NotifyID = ifnull(input.p_NotifyID,0).toLong();
    r_NotifyDetails = Notifications[ID == v_NotifyID];
    v_Text = r_NotifyDetails.Title;
    v_Content = r_NotifyDetails.Content;
  6. To close the dialog on the receiving page, you can add the following code:
    openUrl("#Script:dialog.close","same window");


Related Articles

Joes Revolver Map

Joes Word Cloud


Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate
© 2021 Joel Lipman .com. All Rights Reserved.