UIB: UI Action to initiate Modal Dialog created in UI Builder

[Michael Chang1]

I have configured a modal dialog component in my page. 

and plan to create an UI Action to open the modal dialog in the Workspace Client Script. 

Is there a way to do it?

Few things I've explored:

1. tried g_modal.confirm but it is not able to change the label of the button which is fixed to be 'OK'

2. As i want to make use of the action bar component, the only way to utilise is to create UI action instead of adding a button in UIB and use event to initiate Open or close modal

Hopefully if anyone can help on this. TQ. 

[Daniel Draes]

Yes, this is possible but currently not yet fully documented 😕

I'll try my best here...

Steps:

• Start off by creating a new page that you want to display inside the modal.​​​​​​​
• Navigate to your experience in UIB and create a new page, In my example I am naming it "Modal Page with Button" and adding "table" in the required parameters. After that, I simply drop a button component and change the label to "@context.props.table"
• Once the page is worked upon, navigate to the "App Route" record for the same, by clicking Menu -> Developer -> Open variant collection. There should be a related list for  UX App Routes.
• From the Related list, change the Parent Macroponent to "Record" and add Parent Macroponent Composition Element Id to "modalContainerViewport" (that's the id of the modal in the "record" page)
  
  

• Once this is done, we can create the sys_ux_addon_event_mapping record.

  • The source element ID should be the element id of the component where this Declarative Action resides - in this case ui_action_car
  • Source Declarative Action should be the DA that was created as a pre-requisite. 
  • Parent Macroponent should be Record
  • Target event should be RECORD#OPEN_MODAL. 
  • Target Payload Mapping should be

  {
      "type": "MAP_CONTAINER",
      "container": {
        "route": {
          "type": "EVENT_PAYLOAD_BINDING",
          "binding": {
            "address": [
              "route"
            ]
          }
        },
        "size": {
          "type": "EVENT_PAYLOAD_BINDING",
          "binding": {
            "address": [
              "size"
            ]
          }
        },
        "fields": {
          "type": "EVENT_PAYLOAD_BINDING",
          "binding": {
            "address": [
              "fields"
            ]
          }
        },
        "params": {
          "type": "EVENT_PAYLOAD_BINDING",
          "binding": {
            "address": [
              "params"
            ]
          }
        }
      }
    }
  
  

• Navigate to the Declarative Action that was created as part of the pre-requsities
• Update the payload to have the route, size and fields. 
• The route should be same as the route of the page that was created as first step. In my example the route is `modal-page-with-button`
  
  

Once this is done, we can go to runtime and click the Declarative Action and see the modal showing up. 

[Michael Chang1]

let me test it out.. this is so exciting if it is possible.

[Devin V_]

@Michael Chang Did this ever work for you?

My sys_ux_screen glide record does not have a " Parent Macroponent Composition Element Id" property, so I have not been able to successfully implement this solution.

Were you able to resolve this?

[Ayantika Ghosh1]

@Daniel.Draes I tried this on my PDI, and I am trying to open one from related list action, for some reason the render is not happening, not sure what I am missing.

This is declarative action-

This is Action Payload Definition-

This is the event mapping record -

This is the App Route Config