UIB: Transforming data for Related Content Component
Create & Setup Data Resource to bring in records (I used the “Look up Records” resource)
Create Client State Parameter (Type = JSON, Initial Value = Blank)
Add the Related Content component to your page. Tie the component to your new Client State Parameter by setting Items field to @state.CSName (The name of your Client State Parameter)
Create a new Page Script
Name the script and set it up (below is an example script used to bring in and format the data)
/**
* @param {params} params
* @param {api} params.api
* @param {any} params.event
* @param {any} params.imports
*/
function handler({
api,
event,
helpers,
imports
}) {
const {
setState,
state,
emit
} = api;
//Build Object
const buildObj = function(results) {
var payloadObj = [];
var payload = {};
results.forEach(r => {
payload.title = {
"label": r.name.displayValue,
"variant": "secondary",
"href": "/x/app/profile/" + r._row_data.uniqueValue,
"opensWindow": "false"
};
payload.fields = [];
if (r.email.displayValue)
payload.fields.push({
"text": r.email.displayValue,
"type": "string",
"tooltip": "email"
});
if (r.title.displayValue)
payload.fields.push({
"text": r.title.displayValue,
"type": "string",
"tooltip": "Job title"
});
payloadObj.push(payload);
payload = {};
});
return payloadObj;
};
//Build obj state
if (event.name == "DATA_FETCH_SUCCEEDED") {
// This sets the state of the client state parameter by calling the buildObj function and feeding it the arrray of results from your Data Resource
setState('userObj', buildObj(api.data.get_users.results));
}
}
6. Go back to your Data Resource, and click Events. Then create a new Event Handler under “Data Fetch Succeeded” that called your Page script you created above
Resources
