UI for Entity Details


Create UI for entity details


  Use the following commands to add new ecpDetails UI json files for the rider entity.

fsoc command to add ecpDetails UI components for an entity
Command Format: fsoc solution extend --add-ecpDetails <entity_name>
Command Help: fsoc solution extend -h


Windows Example Commands:

cd C:\fsoc_projects\my_tenant\ugottaride

fsoc solution extend --add-ecpDetails rider

Unix-Mac Example Commands:

cd /fsoc_projects/my_tenant/ugottaride

fsoc solution extend --add-ecpDetails rider

image


What did these fsoc commands do?

  • Created new ecpDetails UI files under
    • /fsoc_projects/my_tenant/ugottaride/objects/dashui/templates/rider
    • ecpDetails.json
    • ecpDetailsInspector.json
    • riderDetailsList.json
  • Updated the manifest.json file to reference the directory and files it created


/fsoc_projects/my_tenant/ugottaride/objects/dashui/templates/rider/ecpDetails.json

{
    "kind": "template",
    "name": "dashui:ecpDetails",
    "target": "ugottaride:rider",
    "view": "default",
    "element": {
        "instanceOf": "ocpSingle",
        "elements": [
            {
                "instanceOf": "ugottaride:riderDetailsList"
            }
        ],
        "nameAttribute": "riderid"
    }
}


/fsoc_projects/my_tenant/ugottaride/objects/dashui/templates/rider/ecpDetailsInspector..json

{
    "kind": "template",
    "name": "dashui:ecpDetailsInspector",
    "target": "ugottaride:rider",
    "view": "default",
    "element": {
        "instanceOf": "elements",
        "elements": [
            {
                "instanceOf": {
                    "name": "alerting"
                }
            },
            {
                "instanceOf": "ugottaride:riderInspectorWidget"
            }
        ]
    }
}


/fsoc_projects/my_tenant/ugottaride/objects/dashui/templates/rider/riderDetailsList..json

{
    "kind": "template",
    "name": "ugottaride:riderDetailsList",
    "target": "ugottaride:rider",
    "view": "default",
    "element": {
        "instanceOf": "html",
        "elements": [
            {
                "instanceOf": {
                    "name": "logsWidget"
                },
                "source": "derived_metric"
            },
            {
                "instanceOf": "card",
                "props": {
                    "title": "miles_traveled"
                },
                "elements": [
                    {
                        "instanceOf": "cartesian",
                        "props": {
                            "style": {
                                "height": 250
                            }
                        },
                        "children": [
                            {
                                "props": {
                                    "name": "ugottaride:miles_traveled"
                                },
                                "metric": {
                                    "name": "ugottaride:miles_traveled",
                                    "source": "fsoc-melt",
                                    "y": {
                                        "type": "value"
                                    }
                                },
                                "type": "LINE"
                            }
                        ]
                    }
                ]
            }
        ],
        "style": {
            "display": "flex",
            "flexDirection": "column",
            "gap": 12
        }
    }
}


  Now use the same commands to add new ecpDetails UI json files for the remaining four entities.


Overide FSOC UI Defaults

  Use the “Replace in files” option in VS Code IDE or similar to find the value “fsoc-melt” and replace it with the name of your solution

image


Validate and Deploy Solution

  Now that we have created the basic UI for our solution, we need to validate it and deploy our solution once more.


  Dev Tip If you are encountering issues where the Tenants UI is not updating promptly, you can open your browser’s developer tools and execute the following command in the console:dashui.clearDb()

image


Next Steps  

For you late night reading pleasure, The Appendix.

Click here to continue