How to get additional column values in PCF Dataset Control using addColumn()

Introduction

In our previous blog, Create Configurable PCF Dataset control using Property-set and Property we asked users about which attributes they would like to visualize. Similarly in this blog, we’ll see how to programmatically get the record value in the context along with the other column values.

In the previous blog we have seen how to get additional data using property-set with the help of user configuration. But there are some attributes which you don’t want the end-user to provide like Created On, Created by and Status, etc. that are common for all the entities.

Prerequisites:

For the above mentioned scenario, we will be using ‘addColumn’ method available in the context.

Below is the syntax for additional columns. You would need to pass the logical name of the field present in the entity record.

Syntax:

context.parameters.sampleDataSet.addColumn(fieldLogicalName)

These values are loaded synchronously. But one thing to keep in mind is that the addColumn () doesn’t return value first time when the updateView is called rather it returns value when the grid has been refreshed.

This might not be ideal for the end-user experience.

So, to load the required columns immediately we need to refresh the grid programmatically using the below function:

context.parameters.sampleDataSet.refresh();

Now, when the refresh method is called, it will call the updateView() method with the columns which we have added using context.parameters.sampleDataSet.addColumn(fieldLogicalName).

Code:

In the index.ts file you can create a method to add multiple columns or use the code in your existing functions as well.

Ideal place to use the addColumn() is to call it in beginning of the UpdateView() before the rest of the logic is executed.

// Add more column other than property-set and default colmn on views

public addMoreColumns(context: ComponentFramework.Context<IInputs>) {

let functionName: string = “addMoreColumns”;

try {

if (context.parameters.sampleDataSet.addColumn) {

context.parameters.sampleDataSet.addColumn(“createdon”);

context.parameters.sampleDataSet.addColumn(“createdby”);

context.parameters.sampleDataSet.refresh();

}

} catch (error) {

console.log(functionName + “” + error.message);

}

}

Before using addColumns() in code we are getting six column values in context.

After using addColumns() we got two more additional columns that we added.

Conclusion

Thus, we have seen how to get column values which are not available on view programmatically using addColumns().