UI for the Solution Home


Create UI for solution home


  Use the following commands to add an ecpHome for your solution.

fsoc command to add an ecpHome UI component
Command Format: fsoc solution extend --add-ecpHome
Command Help: fsoc solution extend -h


Windows Example Commands:

cd C:\fsoc_projects\my_tenant\ugottaride

fsoc solution extend --add-ecpHome

Unix-Mac Example Commands:

cd /fsoc_projects/my_tenant/ugottaride

fsoc solution extend --add-ecpHome


What did these fsoc commands do?

  • Created a new subdirectory under /fsoc_projects/my_tenant/ugottaride/objects
  • Created a new ecpHome json file under
    • fsoc_projects/my_tenant/ugottaride/objects/dashui/templatePropsExtensions
    • ecpHome.json
  • Updated the manifest.json file to reference the directory and files it created


/fsoc_projects/my_tenant/ugottaride/objects/dashui/templatePropsExtensions/ecpHome.json

{
    "kind": "templatePropsExtension",
    "id": "ugottaride:ugottarideEcpHomeExtension",
    "name": "dashui:ecpHome",
    "view": "default",
    "target": "*",
    "requiredEntityTypes": [
        "ugottaride:ride_assign",
        "ugottaride:driver",
        "ugottaride:ride",
        "ugottaride:rider",
        "ugottaride:vehicle"

    ],
    "props": {
        "sections": [
            {
                "index": 6,
                "name": "ugottarideCoreSection",
                "title": "UgottaRide"
            }
        ],
        "entities": [
            {
                "index": 0,
                "section": "ugottarideCoreSection",
                "entityAttribute": "assignid",
                "targetType": "ugottaride:ride_assign"
            },
            {
                "index": 1,
                "section": "ugottarideCoreSection",
                "entityAttribute": "display_name",
                "targetType": "ugottaride:rider"
            },  
            {
                "index": 2,
                "section": "ugottarideCoreSection",
                "entityAttribute": "rideid",
                "targetType": "ugottaride:ride"
            },                      
            {
                "index": 3,
                "section": "ugottarideCoreSection",
                "entityAttribute": "display_name",
                "targetType": "ugottaride:driver"
            },
            {
                "index": 4,
                "section": "ugottarideCoreSection",
                "entityAttribute": "make_model",
                "targetType": "ugottaride:vehicle"
            }
        ]
    }
}


Create Entity Presentations Enrichment

The dashui:entityPresentation template type provides the ability to control the descriptive names of your entities across multiple views within the UI, in one file.

While fsoc does not currently support a command to generate an entityPresentation definition file, it is a simple task to create one manually and then add the reference in the manifest.json.


  Let’s create the directory seen below and then create the entityPresentations.json file with the contents seen below.


/fsoc_projects/my_tenant/ugottaride/objects/dashui/entityPresentations/entityPresentations.json

[
    {
        "kind": "entityPresentation",
        "entityType": "ugottaride:ride_assign",
        "names": [
            "Ride Assignment",
            "Ride Assignment",
            "Ride Assignments"
        ],
        "displayNameAttribute": "rider.assignid",
        "breadcrumbPreferredParentEntityType": "ugottaride:ride_assign"
    },
    {
        "kind": "entityPresentation",
        "entityType": "ugottaride:rider",
        "names": [
            "Rider",
            "Rider",
            "Riders"
        ],
        "displayNameAttribute": "rider.display_name",
        "breadcrumbPreferredParentEntityType": "ugottaride:rider"
    },
    {
        "kind": "entityPresentation",
        "entityType": "ugottaride:ride",
        "names": [
            "Ride",
            "Ride",
            "Rides"
        ],
        "displayNameAttribute": "ride.rideid",
        "breadcrumbPreferredParentEntityType": "ugottaride:ride"
    },
    {
        "kind": "entityPresentation",
        "entityType": "ugottaride:driver",
        "names": [
            "Driver",
            "Driver",
            "Drivers"
        ],
        "displayNameAttribute": "driver.display_name",
        "breadcrumbPreferredParentEntityType": "ugottaride:driver"
    },
    {
        "kind": "entityPresentation",
        "entityType": "ugottaride:vehicle",
        "names": [
            "Vehicle",
            "Vehicle",
            "Vehicles"
        ],
        "displayNameAttribute": "vehicle.make_model",
        "breadcrumbPreferredParentEntityType": "ugottaride:vehicle"
    }
]


  Next we need to add the reference to our solutions manifest.json file as seen below.


/fsoc_projects/my_tenant/ugottaride/manifest.json

        {
            "type": "dashui:entityPresentation",
            "objectsDir": "objects/dashui/entityPresentations"
        }


Next Steps  

We’ll create the UI templates that comprise the ecpList views for lists of instances for a given entity type.

Click here to continue