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 (
<>
<img src={item?.getFormattedValue("ea_image_url")} alt="Property image"></img>
</>)
} 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" ...
... 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?
