# 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.

```csharp
ClearCollect(collLocalWPTracker, WorkProgressTracker)
```

### Connecting

After, we can connect the collection to Power Grid.<br>

![Define the datasource](https://3220951636-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnUfK4SRGZUB01uvHGeDB%2Fuploads%2FkSQCUZwOBI74eQ2ZzPdY%2Fimage.png?alt=media\&token=95d6c793-190f-43fb-853f-6e0695d9ac88)

### Defining fields to be shown

Select the fields to be displayed

![](https://3220951636-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnUfK4SRGZUB01uvHGeDB%2Fuploads%2FyNLdaSpm1VwFwf7J5KSv%2Fimage.png?alt=media\&token=df89a29c-e228-4f0a-914f-3cb4c69de244)

{% hint style="info" %}
You can change the order of the fields by dragging them in a different order
{% endhint %}

### 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:**

```csharp
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"
    }
)
```
