For Zoho Services only:


I'm actually part of something bigger at Ascent Business Solutions recognized as the top Zoho Premium Solutions Partner in the United Kingdom.

Ascent Business Solutions offer support for smaller technical fixes and projects for larger developments, such as migrating to a ZohoCRM.  A team rather than a one-man-band is always available to ensure seamless progress and address any concerns. You'll find our competitive support rates with flexible, no-expiration bundles at https://ascentbusiness.co.uk/zoho-services/uk-zoho-support.  For larger projects, talk to our experts and receive dedicated support from our hands-on project consultants at https://ascentbusiness.co.uk/zoho-services/zoho-crm-implementation.

The team I manage specializes in coding API integrations between Zoho and third-party finance/commerce suites such as Xero, Shopify, WooCommerce, and eBay; to name but a few.  Our passion lies in creating innovative solutions where others have fallen short as well as working with new businesses, new sectors, and new ideas.  Our success is measured by the growth and ROI we deliver for clients, such as transforming a garden shed hobby into a 250k monthly turnover operation or generating a +60% return in just three days after launch through online payments and a streamlined e-commerce solution, replacing a paper-based system.

If you're looking for a partner who can help you drive growth and success, we'd love to work with you.  You can reach out to us on 0121 392 8140 (UK) or info@ascentbusiness.co.uk.  You can also visit our website at https://ascentbusiness.co.uk.

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

What?
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.

Why?
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).

How?
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:
copyraw
<%{
	v_Title = ifnull(p_NotifyTitle,"");
	v_Text = ifnull(p_NotifyContent,"");
	%>
<style>
	/* optional: hide some of the wrapper div boxes: leaves a modal with rounded corners */
	.popupboxOuter{background:none;border:0;}
	.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;}
	</style>
<h3><%=v_Title%></h3>
<p><%=v_Text%></p>
<%}%>
  1.  <%{ 
  2.      v_Title = ifnull(p_NotifyTitle,"")
  3.      v_Text = ifnull(p_NotifyContent,"")
  4.      %> 
  5.  <style> 
  6.      /* optional: hide some of the wrapper div boxes: leaves a modal with rounded corners */ 
  7.      .popupboxOuter{background:none;border:0;} 
  8.      .zc-pb-tile-card{padding: 0px 20px 10px;} 
  9.      /* optional: move the close button to the top right of the modal */ 
  10.      .popupClose{position:relative !important;z-index:1000;top:28px;right:46px !important;} 
  11.      .fa.fa-close::before,.fa.fa-close::after{background:#999 !important;} 
  12.      </style> 
  13.  <h3><%=v_Title%></h3> 
  14.  <p><%=v_Text%></p> 
  15.  <%}%> 

2. Trigger the notification
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:
copyraw
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");
  1.  v_nTitle = encodeUrl("Test")
  2.  v_nText = encodeUrl("Test Content")
  3.  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:
copyraw
<a href="#Page:Notify?zc_LoadIn=dialog&p_NotifyTitle=Test&p_NotifyContent=Test%20Content">Click Here to Popup my Notification Dialog</a>
  1.  <a href="#Page:Notify?zc_LoadIn=dialog&p_NotifyTitle=Test&p_NotifyContent=Test%20Content">Click Here to Popup my Notification Dialog</a> 

Additional
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:
    copyraw
    v_NotifyID = ifnull(input.p_NotifyID,0).toLong();
    r_NotifyDetails = Notifications[ID == v_NotifyID];
    v_Text = r_NotifyDetails.Title;
    v_Content = r_NotifyDetails.Content;
    1.  v_NotifyID = ifnull(input.p_NotifyID,0).toLong()
    2.  r_NotifyDetails = Notifications[ID == v_NotifyID]
    3.  v_Text = r_NotifyDetails.Title; 
    4.  v_Content = r_NotifyDetails.Content; 
  6. To close the dialog on the receiving page, you can add the following code:
    copyraw
    openUrl("#Script:dialog.close","same window");
    1.  openUrl("#Script:dialog.close","same window")

Known Issues
  • Popup opens in the parent window: This only happens on certain machines and I couldn't narrow down the cause. I have tested on both Mac and PC but I had a client using a Mac with admin privileges which would open the same popup link in the parent window. The solution however is to remove the base URL and only keep the URL as something like #Page:Notify. Do NOT add the base URL such as https://creatorapp.zoho.com/myowner/myapp/#Page:Notify.
  • CSS styling affects all contents: Any styling on an embedded form on the popup would need to apply specifically to the contents in the popup. Find the modal or popup name to isolate these from other CSS tags sharing the same name.

Alternative Solution
Some of you may be asking why not use openUrl with a popup parameter, such as:
copyraw
openUrl("#Form:My_Confirmation_Popup?zc_Header=false","popup window","height=144,width=555");
  1.  openUrl("#Form:My_Confirmation_Popup?zc_Header=false","popup window","height=144,width=555")
The reason being, is that the top solution offers a very generic popup box that can be quickly modified with content/text and the popup size will automatically resize based on content. I tend to use the first solution combined with a form/table of standard messages allowing the client to enter their own text to display to their users. A preset form/page with openUrl could do the same thing but it's a fixed width/height and question of preference. There are cases however when the openUrl method might be better, for example, for confirmation dialogs (embedded form).

Source(s):
Category: Zoho :: Article: 733

Credit where Credit is Due:


Feel free to copy, redistribute and share this information. All that we ask is that you attribute credit and possibly even a link back to this website as it really helps in our search engine rankings.

Disclaimer: Please note that the information provided on this website is intended for informational purposes only and does not represent a warranty. The opinions expressed are those of the author only. We recommend testing any solutions in a development environment before implementing them in production. The articles are based on our good faith efforts and were current at the time of writing, reflecting our practical experience in a commercial setting.

Thank you for visiting and, as always, we hope this website was of some use to you!

Kind Regards,

Joel Lipman
www.joellipman.com

Related Articles

Joes Revolver Map

Joes Word Cloud

Accreditation

Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate

Donate & Support

If you like my content, and would like to support this sharing site, feel free to donate using a method below:

Paypal:
Donate to Joel Lipman via PayPal

Bitcoin:
Donate to Joel Lipman with Bitcoin bc1qf6elrdxc968h0k673l2djc9wrpazhqtxw8qqp4

Ethereum:
Donate to Joel Lipman with Ethereum 0xb038962F3809b425D661EF5D22294Cf45E02FebF
© 2024 Joel Lipman .com. All Rights Reserved.