Exercise 4: Create and Edit Notes

Goal

In this section, you'll add the ability to edit existing notes in a modeless dialog window and create new notes.

Update notes dialog

The first part of this exercise will be opening a modeless dialog window when one of the note containers is clicked.

Create and populate a client state parameter

1. Create a new Client state parameter by clicking Client state parameters in the Data and scripts panel and adding the following values

   • noteId | String | 00e84cc22159c6107f44b97c4dc7b6a1 You're setting a default value for now to give you some test data.

     

2. Now you'll populate that CSP when a card base container is clicked. In the content tree, click into the Card Base Container inside the repeater, and click into its Events tab.

3. Add a new event mapping for the Card clicked event.

4. Choose Update client state parameter, choose noteId for the CSP name, and bind the following data to New Value: Repeater > value > _row_data > uniqueValue

   

5. Click Apply and Add.

6. Save the page.

Add the Note form in a modeless dialog

In this section you'll add the note form and actions to a modeless dialog that will be triggered on the card base container click. A modeless dialog is a type of dialog window similar to a modal, except it allows the user to drag it around the page, resize it, and most importantly, interact with the page behind it.

1. In the Overlays section at the top of the content tree, mouse over Modeless dialogs, and click the + to the right, and choose Modeless dialog.

   

2. In the config panel on the right, rename the modeless dialog to the following:

   • Label: Note dialog

   • ID: note_dialog

3. Set the Width config property to 810.

4. In the content tree add a Form component to the container inside the body or the modeless dialog.

   

5. You'll now get a dialog that comes up telling you that a controller is being added with the form component. It also wants to add some page parameters, but you don't need those for this page. Choose Configure manually.

   Because the form component is preset enabled it's going to automatically add a controller which fetches its data and also allows you to control different things about the form.

6. Fill out the Edit Form Controller panel as follows:

   • Table: Note [x_snc_killer_notes_note]

   • Sys ID: <data binding> Client states > noteId

7. Close the panel and you'll now see the note form shown in the form component. The field layout should probably change, so mouse over the form and choose Edit Form to launch Form Builder.

   

8. First, drag the Category field above the Text field by grabbing the field by the six dots on the left (it appears when you mouse over the field) and dragging it above the Text field.

9. Next, remove the User field from the form by mousing over it and clicking the X at the right of the field. You're not deleting the field from the database, just removing it from this form view.

   

10. Now you'll make the Title and Category fields mandatory. Click on the title field and check the Mandatory checkbox on the right.

    

11. Do the same thing for the Category field.

12. Delete the form section that held the moved and removed fields by mousing over it and choosing the trashcan icon.

    

13. Your form should now look like the following. Save the form.

    

14. Use the X icon at the top right to return to UI Builder.

15. Save the UI Builder page and then refresh your UI Builder browser window (SAVE FIRST) to get the form to update. Click on the Form Default component in the content tree to see the new version.

16. Now you'll need to launch the modeless dialog from the card base container click. Click into the Card Base Container inside the repeater in the content tree.

17. Click into the Events tab and add a new event handler to the Card clicked event.

18. Choose Open Modeless Dialog, configure the form as follows, and choose Add:

    • Heading: Edit note

    • Modeless Dialog: Note dialog

    • Single instance: true

    • Modeless Dialog Instance ID: note

      

19. Now Save the page and test it by clicking on a couple of notes.

Note that if your cards aren't clickable you may need to go back to the card base container's configuration and validate that the Interaction is set to Click.

Add buttons to save notes

Now you'll add the form's action bar that'll allow you to save notes and a cancel button to close the dialog.

1. In UI Builder, add an Action bar component to the actions slot of the Note dialog in the content tree.

   

   One thing you'll notice here is the components highlighted in blue. This signifies that the component has presets that can connect to one of the controllers on your page.

2. You'll notice that a couple of the properties on the component are preconfigured by the Form Controller data resource already. All you need to do is set the Number of anchored buttons property to 1.

3. Now add a Flexbox layout to the footer of the modeless dialog.

   

   A flexbox is just a container.

4. Choose None for the container's presets, click into its styles, and set Align items to Flex-end the Margin to L.

5. Inside the container, add a Button component and choose None for the preset using the Preset dropdown in the config panel.

6. Click Remove in the modal to remove the preset.

7. Set the following properties:

   • Label: Close window

   • Variant: Tertiary

8. Click into the Events tab of the button and add an event handler to the Button clicked event.

9. Choose Close Modeless Dialog, set the Modeless Dialog Instance ID to note, and click Add.

   

10. Lastly, click into the Form Controller data resource in the Data and scripts panel.

11. Click the Events tab, choose +Add event mapping, and choose the Form submit completed event.

12. Add an event handler to Refresh the Look up notes data resource.

    

13. Save the page in UI Builder and test. Try clicking on a note, editing the title, and saving it. Also, try the Close window button.

Create a new note

In this section, you'll add a button that allows the user to create a new note.

1. in UIB, in the body container, there are some nested column layouts, click into Column 1, inside the second nested column layout.

2. Set the direction to Row instead of column.

3. Add a Button component after the Stylized text component with the Click a note to view it message and remove the preset using the dropdown in the config panel.

4. Change the config properties as follows:

   • Label: New note

   • Variant: Primary

   • Icon: document-plus-outline

   • Tooltip label: Create a new note

5. Click into the styles tab and set the following:

   • Alignment: Center

   • Margin-left: L

6. Click into the Events tab and add an event handler to the button clicked event.

7. Choose Update client state parameter and set the following values:

   • Client State Parameter Name: noteId

   • New Value: -1

8. Choose Add.

   

9. Add an additional event handler for Open Modeless Dialog and set the following and click Add:

   • Heading: Create note

   • Modeless Dialog: Note dialog

   • Single instance: true

   • Modeless Dialog Instance ID: note

     

10. Now click into the Form Controller data resource in the Data scripts panel and click into the events tab.

11. Add a new event handler for Form submit completed event to refresh the Note count data resource.

12. Add another event handler for the Form submit completed event to Update client state parameter and set the following:

    1. Client State Parameter Name: noteId

    2. New Value: <data binding> Event payload > sysId

13. Save the page and test by using the button to create a new note. Does it save and does the note count update?

Conclusion

You now have a functional front end for a note-taking app built in UI Builder. Its branding should match the branding of other non-workspace modern UIs in your instance.