Hello experts,
I need to create dynamic table based on REST API data.
I'm trying to populate a data set from an object.
to start, I've created a data broker that returns a simple object:
Is it possible to create a dynamic table to fill this data in?
I mean someting like:
Type | Color | Model |
Fiat | White | 500 |
Thanks,
Tomer
Yes It's possible, check any OOB data broker by going to the table sys_ux_data_broker_transform, filter records with Properties field non-empty.
Basically you can pass input parameter from the UIB to the data broker to execute.
For example, you can check "Now DateTime" Data broker script. i am adding here the properties it contains.
[
{
"name": "days",
"label": "Add days",
"description": "Add specified number of days to current date-time",
"readOnly": false,
"fieldType": "string",
"mandatory": false,
"defaultValue": ""
},
{
"name": "months",
"label": "Add months",
"description": "Add specified number of months to current date-time",
"readOnly": false,
"fieldType": "string",
"mandatory": false,
"defaultValue": ""
},
{
"name": "weeks",
"label": "Add weeks",
"description": "Add specified number of weeks to current date-time",
"readOnly": false,
"fieldType": "string",
"mandatory": false,
"defaultValue": ""
},
{
"name": "years",
"label": "Add years",
"description": "Add specified number of years to current date-time",
"readOnly": false,
"fieldType": "string",
"mandatory": false,
"defaultValue": ""
},
{
"name": "seconds",
"label": "Add seconds",
"description": "Add specified number of seconds to current date-time",
"readOnly": false,
"fieldType": "string",
"mandatory": false,
"defaultValue": ""
}
]So the above is the properties coming from UIB. If you want to access it in script, you'll have to do input.property_name(eg. input.days).
Below is a screenshot of how in UIB side, these values are passed. Whatever the properties you create in data broker will be shown in UIB to fill up once you add the data broker in your workspace on UIB side.
The properties Table, sys id are being passed from UIB to data broker. similarly you can pass your parameters in the properties that you will create in Data broker.
Yes, here's another, fairly crude example.
I want to filter this list on demand by any of several properties, such as Serial ID. The back end data is a json array that's been fetched from somewhere, So I put hint fields just above the repeater, for each column I want filtered,
The broker document Properties field:
[
{
"name": "hint_index",
"label": "Index (hint)",
"description": "Jump to a specific row number",
"fieldType": "number",
"mandatory": false,
"defaultValue": null
},
{
"name": "hint_serial_id",
"label": "Type the first few chars of a Serial id",
"description": "User can search by Serial ID",
"fieldType": "string",
"mandatory": false,
"defaultValue": ""
}, ...
]Note One of the properties given in the examples I found, "readOnly" I think it was, gave me trouble. My inputs only appeared on my data broker after I removed this property from the properties field shown above.
Input event hander:
function handler({api, event, helpers, imports}) {
var newValue = event.payload.fieldValue;
newValue = newValue.trim();
if(newValue.length >= 3 || newValue == "") api.setState("hint_serial_id", newValue);
}
Note You can peek into the event payload by creating some client state, ex "peek", and set it like so in your event handler: api.setState("peek", JSON.stringify(event.payload, null)). Then put peek in a text component so you can see what you are getting.
Pass that hint value to your data broker.
Use it in your broker;
function transform(input) {
var result = {};
...
// Serial_id filter
if (input.hint_serial_id) {
result.data = result.data.filter(function(e) {
var result = false;
var value = e.serial_id || "";
result = value.toLowerCase().startsWith(input.hint_serial_id.toLowerCase());
return result;
});
}
...
return result;
}
@tpeleg in the UI Builder, when you check the Data properties for the Data set component, it says "Bind a data broker instance which returns a response object containing metadata and an array of items to render". this means you need to pass data in the required format only.
check this link for more information https://developer.servicenow.com/dev.do#!/reference/next-experience/tokyo/shared-components/now-data...
I am attaching a sample data that you can add in Data properties. see the picture to know where to add(select json from dropdown and then paste the content in the editor).
In your case, you need to set the return data accordingly in the format and set the same using dynamic binding.
{
"items": [
{
"template": "now-card-evam-record",
"propValues": {
"highlightedHeaderLabel": "Vice President",
"textHeaderLabel": "Development",
"titleLabel": "Manifah Masood",
"imageURL": "1792fbe1d701120035ae23c7ce6103e4.iix",
"subtitle": "manifah.masood",
"subtitleAvatarName": "Manifah Masood",
"subtitleAvatarURL": "ab490666c312120048f4d5dc64d3aee8.iix",
"detailValueOne": "manifah.masood@example.com",
"detailValueTwo": "",
"detailValueThree": "",
"highlightedHeaderIcon": "clock-outline",
"highlightedHeaderBkgColor": "moderate",
"subtitleIcon": "calendar-fill",
"imageType": "image",
"subtitleImageType": "avatar",
"detailLabelOne": "Email address",
"detailLabelTwo": "Works for",
"detailLabelThree": "Location/address",
"mainActions": [
{
"assignmentId": "42fd3e5273511010c342d5fdbdf6a70e",
"name": "activate_user",
"label": "Activate",
"actionType": "server_script",
"icon": "Button",
"buttonType": "primary",
"actionDispatch": "",
"serverScript": "current.active = true;\ncurrent.update();",
"confirmationRequired": false,
"confirmationMessage": "",
"actionPayload": "",
"actionPayloadMap": []
},
{
"assignmentId": "e3a173c073151010c342d5fdbdf6a7a2",
"name": "call_number",
"label": "Call Number",
"actionType": "uxf_client_action",
"icon": "",
"buttonType": "primary",
"actionDispatch": "HOME_PHONE_CALL",
"serverScript": "",
"confirmationRequired": false,
"confirmationMessage": "",
"actionPayload": {
"phoneNumber": ""
}
}
],
"clickAction": {
"assignmentId": "d46f400473211010c342d5fdbdf6a7cf",
"name": "navigation",
"label": "Navigation",
"actionType": "uxf_client_action",
"icon": "",
"buttonType": "primary",
"actionDispatch": "NAVIGATION",
"serverScript": "",
"confirmationRequired": false,
"confirmationMessage": "",
"actionPayload": {
"table": "sys_user",
"sysId": "1832fbe1d701120035ae23c7ce610369",
"url": ""
}
},
"model": {
"name": "Manifah Masood",
"email": "manifah.masood@example.com",
"avatar": "ab490666c312120048f4d5dc64d3aee8.iix",
"mobile_phone": "",
"time_zone": "Europe/London",
"title": "Vice President",
"photo": "1792fbe1d701120035ae23c7ce6103e4.iix",
"user_name": "manifah.masood",
"location.name": "",
"company.name": "",
"department.name": "Development",
"sysId": "1832fbe1d701120035ae23c7ce610369",
"sys_id": "1832fbe1d701120035ae23c7ce610369",
"table": "sys_user"
}
},
"buttonType": "primary",
"actionDispatch": "NAVIGATION",
"serverScript": "",
"confirmationRequired": false,
"confirmationMessage": "",
"actionPayload": {
"table": "sc_cat_item",
"sysId": "f514e9e64fcf42c0bde324af0210c766",
"url": ""
},
"model": {
"name": "OS X Mavericks",
"price": "$0.00",
"category.title": "Software",
"vendor.name": "",
"icon": "0f823d404f889200086eeed18110c70f.iix",
"picture": "616db9444f889200086eeed18110c70e.iix",
"short_description": "OS X Mavericks (version 10.9.x) is Apple's tenth\n\t\t\tmajor release of OS X, for Macs\n\t\t",
"model.display_name": "",
"sys_class_name": "Catalog Item",
"delivery_time": "2 Days",
"sysId": "f514e9e64fcf42c0bde324af0210c766",
"sys_id": "f514e9e64fcf42c0bde324af0210c766",
"table": "sc_cat_item"
}
}
]
}
