Use script includes with list component in UI Builder for a landing page

[NFGDom]

I'm hoping someone can give a hand, or advice on where I'm at. Maybe I've stared at this too long, maybe I'm missing a knowledge gab - either way, thank you in advance!

Goal: Have a list component using UI Builder where a manager can see all requests or incidents for their group members. Use this list component as a report on a landing page.

Where I'm at: to my knowledge, there is nothing OOB that allows you to do this. So I went down the path of creating script includes to be called as part of the list filter in UI Builder.

The first script include follow's SNGuru's Advanced 'getMyGroup's function. I'm using this in the second script include as a call to return all the members within those groups.

Please see script includes attached.

I've made it as far as trying to call the 'getGroupMembers()' function within background scripts just to make sure it works before I tried it with the UI Builder list component. However, it does not return anything and I'm not sure why.

Again, help and advise is appreciated. Please let me know if I can provide more information or answer any questions.

[palanikumar]

Hi,

Can you please confirm how are you using this script in UI Builder list component? are you using this in condition?

Thank you,

Palani

[NFGDom]

Right now I'm trying to run the script include within the background - scripts.

var people = getGroupMembers();
gs.log("people: " + people, "script_include");

When I run this, it does not return a list of sys_id's like I'd expect.

I have not tried running this in the UI Builder list component as I wanted to verify this returns the expected information first.

My plan within the filter for the list component was to use

javascript:getGroupMembers();

within the caller or requested for fields. I have not tried this out yet - just stating that is the end-goal at the moment.

Dom

[JagjeetSingh]

Hi,

You do not need to call your script include to do so.

Follow the steps.

1. Open your custom page in UI builder.

2. Click on data sources icon in bottom left corner.

3. Click on Add > New > Transform.

4. In new window you can set up your transform data source. As in your case you do not need any input, you can simply write your logic and return it. Example below.

 

5. Create an ACL for this data broker to execute it.

6. Add the data broker to your page.

Data sources > Add > find the one you created and click on Add.

7. Set the data source to trigger immediately. Alternatively you can trigger it based on an event as well. But your list here is based on logged in user and do not require any input so set it to immediately.

8. Bind the output encoded query to client state parameter.

9. Bind the client state parameter to your list component filter property using @state.YOUR_CLIENT_STATE_PARAMETER and you are done.

The script includes you attached are not readable by the way. Please format and share the code snippets to check further.

I hope it was helpful. 🙂

[JagjeetSingh]

Adding snapshots here in case they are not visible in comment above.