Populate custom image (JPG, PNG or GIF) on Fluid Tile

Generally, when setting up tile image in PeopleSoft Fluid, the system accepts only SVG images, but you can bypass this constraint in the following way:

1. Create the image in application designer XYZ_IMG in your desired format.

2. Create HTML definition XYZ_HTML to display image in HTML area

<a href="https://tst-web-epsi/homepage/aspx/login.aspx" target="_blank"> 
<img border="0" alt="IMG" img src="%Image(XYZ_IMG)" width="130" height="130">
</a>

Make sure to set image width and height to match your tile size.

3. Create application package and insert a class, like below

4. Add following method to viewHTML class

/*Display HTML Tile area with Image*/
import PTGP_APPCLASS_TILE:Tiles:Tile;

class ViewHTML extends PTGP_APPCLASS_TILE:Tiles:Tile
   method ViewHTML();
   method getTileLiveData();
end-class;

method ViewHTML
   %Super = create PTGP_APPCLASS_TILE:Tiles:Tile();
end-method;

method getTileLiveData
   /+ Extends/implements PTGP_APPCLASS_TILE:Tiles:Tile.getTileLiveData +/
      %This.SetTileContentAsHTML();
      %This.TileHtmlArea = GetHTMLText(HTML.XYZ_HTML);
      %This.hasLiveDataDescr = True; /* Enables the live data area. */
      Local string &String;
      &String = "Test Environment";
      %This.TileLiveData_1 = &String;
end-method;

5. Navigate to tile wizard, PeopleTools - Portal - Tile Wizard, select desired folder from navigation collection and click Create New Tile.

On the second page select the appropriate app class you created in step 3 of this process.

On page 3 and 4 select appropriate options like which content reference your tile belongs to, tile size etc and save the tile.

6. Add your newly created tile to the homepage, you will now see the new image on your tile.