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.
Sample App Code
Kintone JavaScript and CSS Customization Page
The following libraries will need to be added to the settings.
- The JavaScript for PC settings should include the jquery and popModal JavaScript files that can be obtained from the Kintone CDN, as well as the sample code.
https://js.kintone.com/jquery/2.2.4/jquery.min.js
https://js.kintone.com/popmodal/1.26/popModal.min.js - The CSS Files for PC settings should include the link to the popModal and Font Awesome CSS files.
https://js.kintone.com/popmodal/1.26/popModal.min.css
https://js.kintone.com/font-awesome/v5.2.0/css/fontawesome-all.min.css
The App's JavaScript and CSS Customization page in the App settings should look as follows:
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.
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.