Power Grid - Showing the data

Saving local collection

Let's make the data available in a connection to be used on Power Grid. This will allow the user to make changes locally before deciding to retrieve back to SharePoint.

ClearCollect(collLocalWPTracker, WorkProgressTracker)

Connecting

After, we can connect the collection to Power Grid.

Define the datasource

Defining fields to be shown

Select the fields to be displayed

You can change the order of the fields by dragging them in a different order

Formating data (Columns DataSet)

Let's format date fields to be shown in the format DD-MMM-YYYY. Also let's create a conditional formating for the field Priority.

For doing so we create a collection as below to store the information. Notice also that we are defining ID field as the key in the collection field isKey:

Table(
    {
        fieldName: "ID",
        displayName: "ID",
        isKey: true
    },
    {
        fieldName: "Title",
        displayName: "Work Item",
        isKey: false
    },
    {
        fieldName: "Priority",
        displayName: "Priority",
        dataType: "text",
        conditionalFormat: [
            {
                condition: "value === 'Low'",
                ifTrue: {color: "black"}
            },
            {
                condition: "value === 'Medium'",
                ifTrue: {color: "#ffcc00"}
            },
            {
                condition: "value === 'High'",
                ifTrue: {color: "orange"}
            },
            {
                condition: "value === 'Critical'",
                ifTrue: {color: "red"}
            }
        ]
    },
    {
        fieldName: "StartDate",
        displayName: "Start date",
        dataType: "date",
        //datatype for the value eg. string,number
        dataFormat: "DD-MMM-YYYY"//Custom date format         
    },
    {
        fieldName: "DueDate",
        displayName: "End Date",
        dataType: "date",
        //datatype for the value eg. string,number
        dataFormat: "DD-MMM-YYYY"//Custom date format         
    },
    {
        fieldName: "Category",
        displayName: "Category",
        dataType: "string"
    },
    {
        fieldName: "Progress",
        displayName: "Progress",
        dataType: "string"
    }
)