cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted

Is there an example of using Image Resources within PCF control?

Hi all,

 

A few of us are still having problems referencing internal images within our controls, can anyone provide an example from their manifest file and control file showing how we are suppose to reference it it appropriately?

 

Cheers

 

Andrew

10 REPLIES 10
Highlighted
Resolver I
Resolver I

Re: Is there an example of using Image Resources within PCF control?

Hi, 

For using Images, you will have to give image src as shown below

 /webresources/cc_YourNamespace.YourClassName /imgFolder /sampleImg.png, instead of relative path 

and add your image tag in ControlManifest xml file - <img path="img/sampleImg.png" />

Highlighted
Impactful Individual
Impactful Individual

Re: Is there an example of using Image Resources within PCF control?

I use classNames, and reference the image inside my css (then I could use a relative path).

But I also wonder, what's the right way to go. Until now I've tried to avoid using absolute path since that could cause problems sometimes, and also since it doesn't use the cached version of the webresource (you loose that kind of GUID that's added in the url).

I wonder what's the best practice.

 

Highlighted

Re: Is there an example of using Image Resources within PCF control?

Thanks guys, all good suggestions and I agree not an ideal situation at the moment. Hemant’s aware and hopefully will chime in with his thoughts around best practices.
Highlighted
Power Apps
Power Apps

Re: Is there an example of using Image Resources within PCF control?

Hi all,

Currently the only supported method to retrieve your images at runtime is to use the getResource API. This will return your image data in base64 encoding, which can then be used with a "src='data:<file type i.e. image/jpg>;base64, <data>'" pattern. Similarly for CSS image references, the suggestion is to use the same API and create dynamic stylesheets where necessary, or to simply embed the image data directly into a css file.

The method mentioned by sheldoncopper73 may work for certain Model App scenarios, but will likely not work in scenarios such as online, nor will it be supported in any future surfaces that support PCF (i.e. Canvas apps).

We recognize this pattern may not be ideal for all users, and we are actively looking into additional ways for consumers to reference images from their manifest for future PCF iterations

Highlighted

Re: Is there an example of using Image Resources within PCF control?

Thanks jolake, i'm just trying to get my head around getResource API (based it off the ImageLoader example).

 

So i've defined my index.ts as such

import {IInputs, IOutputs} from "./generated/ManifestTypes";
import { debug } from "util";


const DefaultImageFileName:string = "./img/like.png";

export class ImageResourceExample implements ComponentFramework.StandardControl<IInputs, IOutputs> {

	
	private imgElement:HTMLImageElement;

	
	// PowerApps component framework framework context, "Input Properties" containing the parameters, control metadata and interface functions.
    private _context: ComponentFramework.Context<IInputs>;
	private _notifyOutputChanged: () => void;
	/**
	 * Empty constructor.
	 */
	constructor()
	{

	}

	/**
	 * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
	 * Data-set values are not initialized here, use updateView.
	 * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
	 * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
	 * @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
	 * @param container If a control is marked control-type='starndard', it will receive an empty div element within which it can render its content.
	 */
	public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
	{
		this._context = context;
		let imageUrl:string;

		// get image resource (see: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/resources/getresource ) 
		
		this.imgElement = document.createElement("img");		
		this._context.resources.getResource(DefaultImageFileName, this.setImage.bind(this, false, "png"), this.showError.bind(this));
		
		
		
		container.appendChild(this.imgElement);
	}


	private setImage(shouldUpdateOutput:boolean, fileType: string, fileContent: string): void
	{
		let imageUrl:string = this.generateImageSrcUrl(fileType, fileContent);
		this.imgElement.src=imageUrl;

	}

	private generateImageSrcUrl(fileType: string, fileContent: string): string
	{
		return  "data&colon;image/" + fileType + ";base64, " + fileContent;
	}

	private showError(): void
	{

	}

	/**
	 * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
	 * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
	 */
	public updateView(context: ComponentFramework.Context<IInputs>): void
	{
		// Add code to update control view
	}

	/** 
	 * It is called by the framework prior to a control receiving new data. 
	 * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
	 */
	public getOutputs(): IOutputs
	{
		return {};
	}

	/** 
	 * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
	 * i.e. cancelling any pending remote calls, removing listeners, etc.
	 */
	public destroy(): void
	{
		// Add code to cleanup control if necessary
	}
}

with the manifest like so:

<?xml version="1.0" encoding="utf-8" ?>
<manifest>
  <control namespace="ControlsAndrewLy" constructor="ImageResourceExample" version="0.0.1" display-name-key="Image Example" description-key="Example of how to properly use images within PCF controls." control-type="standard">
    <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
    <property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" />

    <resources>
      <code path="index.ts" order="1"/>
      <css path="css/ImageResourceExample.css"/>

      <!-- references to images go here -->
      <img path="img/like.png"/>
      <img path="img/play-button.png"/>
      <img path="img/success.png"/>
      <img path="img/time.png"/>
    </resources>
    
    
  </control>
</manifest>

And the result is a image element with no SRC.. (comes up blank)

images_issue.PNG

 

Not sure exactly where i'm going wrong here.  Any ideas, sorry pretty new to this.

 

Cheers

 

Andrew

 

Highlighted
Power Apps
Power Apps

Re: Is there an example of using Image Resources within PCF control?

Quick Q , does it work in the actual app ( and not test harness) ? I will give it a try if we the weekend . Btw you can try browser debugging in harness too.

Hemant
Highlighted

Re: Is there an example of using Image Resources within PCF control?

Was there any resolution to this? I am facing the same issue. Data string is blank (undefined) when in success method.

Highlighted
Solution Sage
Solution Sage

Re: Is there an example of using Image Resources within PCF control?

Hi All,

 

This method doesn't work in harness, but works correctly in a real environment. It behaves like this for a really long time.

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.
Highlighted
Power Apps
Power Apps

Re: Is there an example of using Image Resources within PCF control?

1. Direct references to the web resources should not be made via PCF as it breaks the dependencies.

2. You can use getResrouce as pointed above to use the PCF image resources in the product,

3. This is not yet  supported in the test harness and is tracked via internal bug  1680472

 

hemant 

Helpful resources

Announcements
secondImage

New Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

Experience what’s next for Power Apps

Join us for an in-depth look at the new Power Apps features and capabilities at the free Microsoft Business Applications Launch Event.

Check this Out

Helpful information

Featuring samples like Return to the Workplace and Emergency Response Applications

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (7,305)