Reducing Page Switching using UI Builder

[SriharshaYe]

Scenario : Imagine in Workspace where agents can instantly toggle between viewing Requests and their corresponding Requested Items — all from a single, interactive page. Here are the steps to acheive it.

1.Navigate to Now Experience Framework > UI Builder.

2.Create a new page from scratch in service operation workspace 

3.Add a button component to the page.

• Under the content tree, select '+ Add content'.
• Then search for Button in the component search pop up.
• Select the Button component.
• Rename it to "Request ↔ Requested Item"

4. Add Record List Component to the page 

• select '+ Add content'.
• Then search for "Record List" in the component search pop up.
• Select the Record List component.

5. Create a Client State Parameter

• On the bottom left of the page, underneath Data and scripts, select Client state parameters.
• Name: 'TableName'
  Type: String
  Initial value: sc_request

6. Bind Client state Parameter

7. Create a Client Script

• In the bottom left corner of the page, select Data and scripts, then select Client scripts.
• Copy then paste the script below and Select Apply.

/**

* @Param {params} params

* @Param {api} params.api

* @Param {any} params.event

* @Param {any} params.imports

* @Param {ApiHelpers} params.helpers

*/

function handler({

api,

event,

helpers,

imports

}) {

if (api.state.Tablename== 'sc_req_item') {

api.setState('Tablename', 'sc

api.setState('Tablename', 'sc_req_item');

}

}

8. Add an Event Handler

• Select Events tab on the configuration panel of "Request ↔ Requested Item" 
• Below Button clicked, Select Add Handler
• Search for "View Req or req item" (the name of the client script we created earlier)
• Select Continue
• Below When to trigger > Select Always and click on Apply.

 Save and verify the functionality is working fine.

Result :

->By default it shows the list of records of "sc_request" table

Clicking on "Request ↔ Requested Item" button , list of "sc_req_item" table are displayed .

Upon Clicking on "Request ↔ Requested Item" button , list of "sc_request" table are displayed without  switching the page or tab

Feel free to suggest other approaches, thanks in advance

Thanks and Regards,

Sriharsha