Join the program

Display explanatory text pop-ups with popModal

Last Updated:
Follow

Introduction

This tutorial covers how to use the popModal library within a Kintone Application using JavaScript customizations.

 

The popModal library is jQuery dependent and allows users to add various different types of pop-ups to their Apps. These pop-ups include notifications, text, hovering hints, long dialogue, hovering labels, and confirmation notices.

 

This tutorial will focus on the hintModal feature of popModal. These various pop-ups allow Apps to appear less cluttered and text free. This will allow users to keep their Apps’ appearances simple and clean especially if one wants to include large bodies of text in their Apps. popModal can be used to provide in-App hints and tips on how to navigate and use an App. It can also be helpful to provide pop-ups that include large amounts of text, freeing up screen space in your App. 

 

 For more information on popModal, refer to the popModal documentation.

Setting up the App

The popModal library can be used on any App to display an informative pop-up, with only a single Blank Space field. This tutorial will create a Daily Lunch Order App for office employees.

 

Create an App with the following fields:

Field Name Field Type Field Code
Ordered By: User Selection ordered_by
Your lunch order: Check Box lunch_order
  Blank Space add


We will customize the App so that the hint icon will appear in the blank space. When inputting data for a new record, an exclamation icon will appear that when hovered over, will display further details of the content of the App. This example will display restaurant information, which employee will pay for the lunch, and the individual prices of each menu item. 

sample3.png

Sample App Code

 

Kintone JavaScript and CSS Customization Page

The following libraries will need to be added to the settings.

The App's JavaScript and CSS Customization page in the App settings should look as follows:

 

sample-customazation.png

 

Save the settings and update the App. Click the [+] icon to open up the create new record page. Hovering over the exclamation icon will display the additional text.

 

sample-popModal-compressor.gif

Code Explanation

This section will explain the sample code.

 

The code will be executed on the create new record and edit record events.

 

This section of the code creates a variable using jQuery that creates the HTML element of the exclamation point icon and the text content that is displayed when hovering over the icon.

 

This line applies the hintModal method of popModal to the created HTML element by searching for the class that was created.

 

Finally, the code searches for the blank space with the field code add, and appends the HTML element. The event object is returned to display the changes to the form.

 

Finally

It's important to upload the popModal CSS file into the JavaScript and CSS Customization settings for the popModal features to function correctly. Even though popModal has the capability of displaying pop-up notifications and confirmation notices it’s most unique features are their hovering pop-up text displays in the form of hints or pop-up dialogue and titles.

SweetAlert2 is an alternative library that can be utilized to display good looking pop-up notifications and confirmation notices within Kintone.  

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!