Creating pop ups/modals for Configurable Workspaces using UI Builder

[mslocum]

We recently started our switch to Configurable Workspaces for our custom apps and ran into an issue getting Modals/UI Pages to pop up using the traditional UI Actions/UI Pages methods used in the classic experience. During my deep dive online I had a hard time finding content that related to this topic.  I initially went down the declarative action route but ran into road blocks there since this workspace was not an OOB workspace such as the Service Operations Workspace. This article will be a high level overview of how I was able to us UI Builder (We are on Utah) to create a Modal related to the record page that has a button that conditionally hides/shows to launch this modal/pop up.

Disclaimer: There are more than likely alternative and better ways to do this, this is what I did to meet our use case.

Use Case:

Create a button on the record page in configurable workspace that launches a pop up/modal to take in escalation notes that then updates the record with the note and sets the custom escalation field.

Assumptions:

• You are on Utah or newer
• You have created your configurable workspace experience already (we used app engine to create the default workspace/experience)

Final Items:

1. Button that is next to the form actions that appears to be apart of the UX Form Actions for the form

2. Modal that updates the form with the input from the user.

Steps to create the button and modal

1.  Open UI Builder and Open your Experience
2. Locate the page where your modal and button should live and open the page in the editor
   1. For our use case, this was our Ticket Record Page
3. Create the Modal
   1. Once you are on the Page in UI Builder where your modal should pop up, locate the Modals in the top of the content and create your modal via the add modal button. In this use case, I started with "Custom" modal and added 3 components. A text field and 2 buttons.
      1. 
      2. Make sure you use the events on the buttons in the modal to make form changes and close the model on press. In this case, the cancel clears and changes and closes the model and the Escalate changes a field on the form, saves the record, and closes the modal.
      3. While there may be a better way to do this, I used and event attached to the text box to update the field on the form with its contents once the user is done filling it. Using the payload value. 
         
         1. Cancel button was used to clear that value if it was not saved.
         2. 
         3. the field name in the image above is the variable name of the field on the record. In my testing, it needed to be visible on the form for this to work. 
         4. The Escalate button had 3 events on button click. Set field value, save the record, and close the modal dialog
            1. 
4.  Create the button to open the modal and configure button visibility
   1. In this case we wanted the button to be next to the other UI Actions on the form and make it look as if its part of the same group. To do this, I placed the button next to the Action Bar component in the Top Right (Flex) Container.
      1.  
      2. Update the events of the button to open the required Modal
         1.  

      3.  Update the conditions of the to hide/show the component. A return of true, hides the button component. I used a script to do this. They way I implemented this, it required the fields to be shown on the form.

         1.  
         2.  

/**
  * @Param {params} params
  * @Param {api} params.api
  * @Param {TransformApiHelpers} params.helpers
  */
function evaluateProperty({api, helpers}) {
  if(api.data.record.form.fields.support_tier.value == "Tier 2" && api.data.record.form.fields.state.value < '3')
    return false; //hide component
  else
  return true; //show component


}​

[Anila Chalisse1]

Hi,
I have a similar requirement and i need to save the modal input value to backend tables field when clicked on Ok. Any idea how to achieve it?