UI for Entity Lists
Create UI for entity lists
Use the following commands to add new ecpList UI json files for the rider entity.
| fsoc command to add ecpList UI components for an entity | |
| Command Format: | fsoc solution extend --add-ecpList <entity_name> |
| Command Help: | fsoc solution extend -h |
Windows Example Commands:
cd C:\fsoc_projects\my_tenant\ugottaride
fsoc solution extend --add-ecpList rider
Unix-Mac Example Commands:
cd /fsoc_projects/my_tenant/ugottaride
fsoc solution extend --add-ecpList rider
What did these fsoc commands do?
- Created a new subdirectory under /fsoc_projects/my_tenant/ugottaride/objects/dashui/templates
- Created new ecpList UI files under
- /fsoc_projects/my_tenant/ugottaride/objects/dashui/templates/rider
- ecpList.json
- ecpListInspector.json
- ecpName.json
- ecpRelationshipMap.json
- riderGridTable.json
- riderInspectorWidget.json
- Updated the manifest.json file to reference the directory and files it created
Now use the same commands to add new ecpList UI json files for the rest of the entities.
/fsoc_projects/my_tenant/ugottaride/objects/dashui/templates/rider/ecpList.json
{
"kind": "template",
"name": "dashui:ecpList",
"target": "ugottaride:rider",
"view": "default",
"element": {
"instanceOf": "ocpList",
"elements": {
"instanceOf": "card",
"props": {
"style": {
"height": "calc(100% - 298px)",
"padding": 0,
"width": "100%"
}
},
"elements": [
{
"instanceOf": "ugottaride:riderGridTable"
}
]
}
}
}/fsoc_projects/my_tenant/ugottaride/objects/dashui/templates/rider/ecpListInspector.json
{
"kind": "template",
"name": "dashui:ecpListInspector",
"target": "ugottaride:rider",
"view": "default",
"element": {
"instanceOf": "elements",
"elements": [
{
"instanceOf": "focusedEntities",
"element": {
"instanceOf": {
"name": "nameWidget"
},
"path": [
"attributes(riderid)",
"id"
]
},
"mode": "SINGLE"
},
{
"instanceOf": "focusedEntities",
"element": {
"instanceOf": {
"name": "ugottaride:riderInspectorWidget"
}
},
"mode": "SINGLE"
}
]
}
}/fsoc_projects/my_tenant/ugottaride/objects/dashui/templates/rider/ecpName.json
{
"kind": "template",
"name": "dashui:name",
"target": "ugottaride:rider",
"view": "default",
"element": {
"instanceOf": "string",
"path": [
"attributes(riderid)",
"id"
]
}
}/fsoc_projects/my_tenant/ugottaride/objects/dashui/templates/rider/ecpRelationshipMap.json
{
"kind": "template",
"name": "dashui:ecpRelationshipMap",
"target": "ugottaride:rider",
"view": "default",
"element": {
"instanceOf": "leftbar",
"elements": [
{
"key": "rider",
"path": ".",
"entityAttribute": "riderid",
"iconName": "AgentType.Appd"
},
{
"key": "ride",
"path": "out(common:consists_of).to(ugottaride:ride)",
"entityAttribute": "id",
"iconName": "AgentType.Appd"
}
]
}
}/fsoc_projects/my_tenant/ugottaride/objects/dashui/templates/rider/riderGridTable.json
{
"kind": "template",
"name": "ugottaride:riderGridTable",
"target": "ugottaride:rider",
"view": "default",
"element": {
"instanceOf": "grid",
"rowSets": {
"default": {
"keyPath": "id"
}
},
"mode": "server",
"columns": [
{
"label": "Health",
"flex": 0,
"width": 80,
"cell": {
"default": {
"instanceOf": {
"name": "health"
}
}
}
},
{
"label": "riderid",
"flex": 0,
"width": 80,
"cell": {
"default": {
"instanceOf": "tooltip",
"truncate": true,
"trigger": {
"instanceOf": "clickable",
"onClick": {
"type": "navigate.entity.detail",
"paths": [
"id"
],
"expression": "$ ~> |$|{\"id\": $data[0]}|"
},
"trigger": {
"instanceOf": "string",
"path": [
"attributes(riderid)",
"id"
]
}
}
}
}
},
{
"label": "first_name",
"flex": 0,
"width": 80,
"cell": {
"default": {
"instanceOf": "tooltip",
"truncate": true,
"trigger": {
"instanceOf": "string",
"path": [
"attributes(first_name)"
]
}
}
}
},
{
"label": "last_name",
"flex": 0,
"width": 80,
"cell": {
"default": {
"instanceOf": "tooltip",
"truncate": true,
"trigger": {
"instanceOf": "string",
"path": [
"attributes(last_name)"
]
}
}
}
},
{
"label": "display_name",
"flex": 0,
"width": 80,
"cell": {
"default": {
"instanceOf": "tooltip",
"truncate": true,
"trigger": {
"instanceOf": "string",
"path": [
"attributes(display_name)"
]
}
}
}
}
],
"onRowSingleClick": {
"type": "common.focusEntity",
"expression": "{ \"id\": $params.key }"
},
"onRowDoubleClick": {
"type": "navigate.entity.detail",
"expression": "{ \"id\": $params.key }"
}
}
}/fsoc_projects/my_tenant/ugottaride/objects/dashui/templates/rider/riderInspectorWidget.json
{
"kind": "template",
"name": "ugottaride:riderInspectorWidget",
"target": "ugottaride:rider",
"view": "default",
"element": {
"instanceOf": "elements",
"elements": {
"instanceOf": {
"name": "inspectorWidget"
},
"elements": {
"instanceOf": {
"name": "properties"
},
"elements": [
{
"label": {
"instanceOf": "text",
"content": "display_name"
},
"value": {
"instanceOf": "string",
"path": "attributes(display_name)"
}
},
{
"label": {
"instanceOf": "text",
"content": "riderid"
},
"value": {
"instanceOf": "string",
"path": "attributes(riderid)"
}
},
{
"label": {
"instanceOf": "text",
"content": "first_name"
},
"value": {
"instanceOf": "string",
"path": "attributes(first_name)"
}
},
{
"label": {
"instanceOf": "text",
"content": "last_name"
},
"value": {
"instanceOf": "string",
"path": "attributes(last_name)"
}
}
]
},
"title": "Properties"
}
}
}
Next Steps
We’ll create the UI templates that comprise the ecpDetails views for a specific instance for a given entity type.