Lab objectives
In this lab, you will be creating a modal within the Safety Portal experience. This will allow users to enter a short description and priority for a Safety Issue, then submit it to create a new record. The Location of this record will be set to the location of the User.
To make this happen, it will require the creation of two client state parameters and two data resources.
A. Create Client State Parameters
We will use client state parameters to store the input needed to create a new Safety
record, as well as to specify when to refresh the list component.
1. Select the Client state icon on the left vertical menu, then select + Add twice so you can add two new client state parameters.
2. Configure the three client state parameters with the following values:
- Name: short_description
- Type: String
- Initial value: [leave blank]
- Name: priority
- Type: String
- Initial value: [leave blank]
Note: The Client state preview panel shows the value of each parameter.
3. Save your work.
4. Select the Client state icon again on the left vertical menu to close the Client state parameters panel.
B. Create Data Resources
You will create two data resources. One will be used to create a new Safety Issue record and one will fetch the Location specified on the User record of the logged in user (just like we did in the previous lab).
Create Record Data Resource
1. Select the Data Resources icon on the left vertical menu, then select + Add to begin the creation of the data resource.
2. In the pop-up window, enter “create” in the Search data resources text box to filter the list of available data resources.
3. Select the Global application in the first panel, the Create Record data resource in the middle panel, and then Add.
Note: For the Create Record data resource, no additional configuration is needed.
Look Up Record Data Resource
1. Select + Add again to begin the creation of a second data resource.
2. Search “look up” in the Search data resources text box.
3. Select the Look Up Record data resource in the middle panel and then Add.
4. Configure the Look Up Record 1 data resource. Within the Config tab, specify the below values. Use the Dynamic data binding option to specify the @context syntax for the Record value.
- Table: User (sys_user) (tab out of this field once selected)
- Record: @context.session.user.sys_id (fetches session data)
- Return fields: Location
5. Save your work.
6. Select the Data Resources icon again on the left vertical menu to close the Data resources panel.
C. Create a Modal
1. To add a modal to the page, select +Add within the Content tree and choose Modal.
2. Several modal options are presented, choose Custom.
3. The empty custom modal will be displayed. In the Content tree, under Modals > Custom 1 > Header 1, select + Add component and add a Rich text component.
4. Select the Rich text 1 component in the Content tree. Within the Configuration panel, select the Config tab and the Edit html button.
5. Replace the existing text with Log a Safety Issue. Give it a size of 18pt, then bold and center the text, and select Apply.
6. Save your work.
7. In the Content tree, under Modals > Custom 1 > Body 1, select + Add component and add an Input component.
8. Select the Input 1 component in the Content tree. Within the Configuration panel, select the Config tab and specify the below values.
- Type: Text
- Label: Short description
9. When a user populates the Short description input field, we want to store the value in the short_ description client state parameter we created earlier.
Within the Configuration panel, select the Events tab, then +Add event mapping. Choose the Input value set event.
10. Within the Event window, select Update client state parameter. Provide the values below and select Add.
- Client State Parameter Name: short_description
- New Value: @payload.value (select the Dynamic data binding icon first)
11. Select Save in the upper right-hand corner to save your work.
12. Select Input 1 in the Content tree and click the three dots on the right to bring up a menu. Select Add component after and choose the Dropdown component.
13. Within the Configuration panel, select the Config tab and update this property:
- Placeholder text: Select a Priority
14. Within the Configuration panel, select the Styles tab and set the following property values:
- Flex: Grow
- Alignment: stretch
15. Back within the Config tab, select the Items property which opens a JSON editor. A JSON object containing list of name/value pairs for the dropdown item values and labels must be provided.
• Within the JSON editor, update the id and label properties for 4 of the 6 Array items as follows:
• critical / 1 – Critical
• high / 2 – High
• moderate / 3 – Moderate
• low / 4 – Low
• Delete the last two Array items (use the garbage can icon) as they are not needed.
Note: The Hide unset items toggle at the top was selected so that only the Item properties with values would be displayed in the image above.
• In the Mode dropdown, select JSON and view the JSON object that was created as a result of the id / values you specified.
[{"id":"critical","label":"1 - Critical"},{"id":"high","label":"2 - High"},{"id":"moderate","label":"3 -Moderate"},{"id":"low","label":"4 - Low"}]
• Select Apply.
16. Select Save in the upper right-hand corner to save your work.
17. When a user selects a Priority value, we want to store the value in the priority client state parameter we created earlier.
Within the Configuration panel, select the Events tab, then +Add event mapping.
Choose the Dropdown selected items set event.
18. Within the Event window, select Update client state parameter and provide the values below. Select Add.
- Client State Parameter Name: priority
- New Value: @payload.value (select the Dynamic data binding icon first)
19. In the Content tree, under Modals > Custom 1 > Footer 1, select + Add component and add a Button component.
20. Within the Configuration panel, select the Config tab and update the following values to configure the Button component properties:
- Variant: Primary
- Size: Large
- Label: Submit a Safety Issue
- Icon: Building Outline
21. Select Save in the upper right-hand corner to save your work.
22. With the Button 3 component still selected, select the Events tab within the Configuration panel. Under the Button clicked event, select +Add event handler.
23. In the Event window, select the Create Record 1 > Execute data resource and specify Issue for the Table value.
24. Next, select the Edit field values button and specify the field values below that need to be set with the Create Record data resource. Use Dynamic data binding to access the corresponding client state parameter values and data resource.
- Short description is @state.short_description and
- Priority is @state.priority and
- Location is @data.look_up_record_1.result.location.value
25. Select Apply and Add.
26. With the Button 3 component still selected, under the Events tab, select +Add event handler again under the Button clicked event to add a second event handler.
27. Select Open or close modal dialog, specify Custom 1 for the Modal value, and select Add.
28. With the Button 3 component still selected, under the Events tab, select +Add event handler again under the Button clicked event to add a third event handler.
29. Select Look Up Issues > Refresh and select Add.
30. In the Content tree, select Modals > Custom 1 > Footer 1. Within the Configuration Panel, select the Styles tab. Set the Align items (not Alignment) property to Center.
31. Select Save in the upper right-hand corner to save your work.
32. Configure the modal to pop up when the Log a Safety Issue button (Button 1) is clicked. In the Content tree, select Body (Flex) > Container 2 (Flex) > Button 1.
33. Select the Events tab within the Configuration panel. Under the Button clicked event, select +Add event handler.
34. Select the Open or close modal dialog, specify the following values and select Add.
- Open modal dialog: true
- Modal: Custom 1
35. Select Save in the upper right-hand corner to save your work.
D. Test Your Work
1. Select Open in the URL bar, to view the portal page in a new browser tab.
2. Select the Log a Safety Issue button, the modal will pop up. Enter a Short description, choose a Priority, and select the Submit a Safety Issue button.
3. Verify the following happens when you select the Submit a Safety Issue button:
• The modal closes upon submit.
• The My Safety Issues cards are refreshed, so you can see the new record.
• The new record contains the same Short description and Priority values you entered in the Modal.
Congratulations! You have completed this lab
Next
Lesson 15 - Themes