My instance is on San Diego patch 2.
I really love this concept from the Carousel component documentation:
It's not entirely clear to me what type of widget these 'card' displays of incidents are. I've watched the LCHH sessions on the new repeater component and have been able to use both the repeater and the carousel. What I can't figure out is how to call the dynamic data set pulled into the repeater in my card header.
In the screenshot below, I'm able to put a button in the carousel + repeater and display the case numbers in my dynamic data set:
It seems like what I need is to understand how you set the name-value pairs for the attributes of these card components.
For example, this is the Heading on the card base header component:
If I try to bind that to the data set result, the widget header just disappears;
I am thinking maybe there is something fundamental I'm missing on the Card components.
Any suggestions?
I managed to cobble together how to do this from the few resources available on these newer components.
First, I realized that I needed to somehow output the value of the data resource as the JSON. To do that, I used a Transform data resource.
The second video in this post demos how to do that:
https://developer.servicenow.com/blog.do?p=/post/quebec-ui-builder-data-resources/
Then, this blog post on transforming some data resource output to what was needed for the calendar widget helped me understand how to build the data resource I needed for this case:
https://community.servicenow.com/community?id=community_article&sys_id=b9e95ae4db417010030d443039961958
My Data Broker Script looks like this:
So that you can use my examples, here's the full script at the current time:
function transform(input){
var returnArray = [];
var records = input.data;
for (var i in records){
var myObj = {};
myObj.sysidValue = records[i].sys_id.displayValue;
myObj.number = records[i].number.displayValue;
myObj.numberTransform = '{"label":"' + myObj.number + '","icon":"grid-three-outline","variant":"primary"}';
myObj.subject = records[i].short_description.displayValue;
myObj.subjectTransform = '{"label":"' + myObj.subject + '","size":"md"}';
myObj.state = records[i].state.displayValue;
myObj.stateTransform = '{"label":"' + myObj.state + '","size":"md"}';
myObj.caseReason = records[i].u_case_reason.displayValue;
myObj.caseReasonTransform = '{"label":"Case Reason: ' + myObj.caseReason + '","size":"md"}';
myObj.caseOwner = records[i].assigned_to.displayValue;
myObj.caseOwnerAvatar = records[i].assigned_to.avatar;
myObj.status = records[i].u_status.displayValue;
myObj.statusTransform = '{"label":"' + myObj.status + '","size":"md"}';
myObj.priorityInteger = records[i].priority.value;
myObj.priorityValue = records[i].priority.displayValue;
myObj.priorityTransform = '{"label":"' + myObj.priorityValue + '","size":"md"}';
myObj.account = records[i].account;
myObj.accountName = '{"label":"' + myObj.account.displayValue + '","size":"md"}';
//set priority color
var colorValue;
if(myObj.priorityInteger == 1) {
colorValue = "critical";
}
else if(myObj.priorityInteger == 2) {
colorValue = "yellow";
}
else if(myObj.priorityInteger == 3) {
colorValue = "blue";
}
else{
colorValue = "green";
}
myObj.color = colorValue;
returnArray.push(myObj);
}
return returnArray;
}
Then, in the component properties that require a JSON format, I'm using the output values in the script above that are named with 'Transform'.
Combined with carousels and repeaters I can now display cards with case data:
Needs some styling, but it's a lot better than our past view, where we mainly have single-score widgets that agents click through to a list view.
Hi,
i have similar requirement where i need to update the Lable:
current:
Here I need to update only Open URL lable to Open documentation ?
could you please help me how to do this?
