Power Apps - Power Apps Pro Dev & ISV

Answered

PCF dataset component item?.getFormattedValue("pp_mycolumnname") in onRenderItemColumn returns undefined when page refreshed, but OK when navigate via Show As

(0) Share

Report

Posted on by LozzieD

203

I'm using the sample Model-driven app Grid PCF dataset component ...

https://learn.microsoft.com/en-us/power-apps/developer/component-framework/tutorial-create-model-driven-app-dataset-component

I've remmed-out the highlighting functionality, so it just acts as a grid.

In Grid.tsx, side the onRenderItemColumn function of the DetailsList FluentUI component, I've changed the code as below ...

Original

const onRenderItemColumn = (

item?: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord,

index?: number,

column?: IColumn,

) => {

if (column && column.fieldName && item) {

return <>{item?.getFormattedValue(column.fieldName)}</>;

}

return <></>;

};

Changed

const onRenderItemColumn = (

item?: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord,

index?: number,

column?: IColumn,

) => {

if (column && column.fieldName && item) {

if (column!.fieldName == image) {

// const imagesrc=item?.getFormattedValue("ea_image_url");

// const imagesrc=item?.getFormattedValue("ea_propertyimagename");

return (

</>)

} else {

// const colFormattedValue = item?.getFormattedValue(column.fieldName);

return <>{item?.getFormattedValue(column.fieldName)}</>;

}

return <></>;

};

My code does the same thing as the original except when the column name equals the value (string) of a property in ControlManifest.Input.xml called Image. When the column name equals the value of Image, the onRenderItemColumn does an if then into a different render and puts out an <img> rendering from that named column (which must be an image column) using the image supporting column "pp_image_url" ...

https://learn.microsoft.com/en-us/power-apps/developer/data-platform/image-attributes#supporting-columns

... which contains the path to the image as the <img> src attribute.

Now this works fine when you navigate to the component by using Show As and selecting the Grid component ...

But when you refresh the page, or copy paste the URL into a new browser, or navigate to it in any way other than Show As, the <img> src value is undefined i.e. the value returned from item?.getFormattedValue("ea_image_url") is undefined and the image doesn't render ...

In fact, any other column in item, i.e. one that isn't the pp_image_url column, comes back undefined unless Show As is used to navigate to the page onw which the component resides. So it's not something special about the image supporting column.

When I inspect the dev tools Console I see a 401 error when the component fails ...

I don't see any errors when the component works, i.e. when the component page is navigated to from Show As.

Any ideas anyone?

Categories:

Power Apps component framework

All responses (5)

Answers (1)

LozzieD 203 on at

Like (0)

Report

Re: PCF dataset component item?.getFormattedValue("pp_mycolumnname") in onRenderItemColumn returns undefined when page refreshed, but OK when navigate via Show As

First image in above comment should be this:
Verified answer

LozzieD 203 on at

Like (1)

Report

Re: PCF dataset component item?.getFormattedValue("pp_mycolumnname") in onRenderItemColumn returns undefined when page refreshed, but OK when navigate via Show As

MS support resolved the issue.

You need to add the pp_image_url column to the dataset and refresh the dataset in the index.ts updateView method:

If you don't do that, the column only appears when you do a Show As and choose another control to bring the column into the dataset, then Show As again and choose your control, thereby the column is available in the dataset in the updateView method in your control and the image is displayed. Browser refresh clears the column from the dataset again though, so it won't be available in updateView unless you repeat that Show As process again.

But with the above code in the index.ts updateView method, the column is available in the Grid.tsx immediately without the Show As steps above.

So, now you can easily render an image in a column with a simple <img/> element in the onRenderItemColumn:

Cheers MS support!
LozzieD 203 on at

Like (0)

Report

Re: PCF dataset component item?.getFormattedValue("pp_mycolumnname") in onRenderItemColumn returns undefined when page refreshed, but OK when navigate via Show As

I'm raising a ticket with MS support.

Will report back any solution.
LozzieD 203 on at

Like (0)

Report

Re: PCF dataset component item?.getFormattedValue("pp_mycolumnname") in onRenderItemColumn returns undefined when page refreshed, but OK when navigate via Show As

Second correction - ooops, sorry!

The only column that has this problem is the pp_image_url ie the supporting column for the image ...

https://learn.microsoft.com/en-us/power-apps/developer/data-platform/image-attributes#supporting-columns

I can access other columns columns in the onRenderItemColumn function (other than the one it is positioned on) from the item?.getFormattedValue() function.

So, I have a workaround to get the url of the image by constructing its component parts from the other columns ...

This works in all circs, both navigating using Show As and any other way.

But using the supporting column pp_image_url would be so much better as it is maintained by Dataverse itself, rather than constructed by me. And that, after all, is the column's purpose.

So the issue still stands with pp_image_url supporting column: Why does it return undefined when rendered in all cases other than Show As?
LozzieD 203 on at

Like (0)

Report

Re: PCF dataset component item?.getFormattedValue("pp_mycolumnname") in onRenderItemColumn returns undefined when page refreshed, but OK when navigate via Show As

Bit misleading regarding when I said: "any other column in item ... comes back undefined". The column on which the onRenderItemColumn function is positioned i.e. the one specified in the parameter column?, works in all circumstances. Otherwise none of those text values in the columns would be there.

It's only when you try to get to another column in the item? parameter using item.getFormattedValue(column_name) that it fails in the way described, i.e. in every navigation route other than Show As.