Home / Educational Content / PeopleSoft / PeopleSoft Blog / Fluid UI – Tile Wizard API Part 1: Dynamic Tile Content

Fluid UI - Tile Wizard API Part 1: Dynamic Tile Content

As part of our initiative to provide quality content to our community, Quest has teamed up with several PeopleSoft thought leaders who will be sharing their knowledge across our blogs. This week, Sasank Vemana, ERP Analyst continues his series of posts about his experience on Fluid User Interface.

Sasank Vemana, Quest Guest Blogger | Blog content sourced from Sasank’s PeopleSoft Log
PeopleTools 8.55 introduced the Tile Wizard App Classes which enable us to use the API to dynamically modify Tile Content.

PeopleBooksTile Wizard Classes

There are three main areas in the Tile where we can add dynamic content – Tile Content, Live Data and Badge.

Here is an example of how we can use the Tile Wizard Classes to dynamically update the content of a Tile as shown in the example below.

aad9413129a478560c303237a36d27bb-huge-1.

Step 1: Implement a custom App Class that extends PTGP_APPCLASS_TILE:Tiles:Tile

01f219aafa7b6e7f0a9ea4662b05e7c1-huge-2.

 


dad191dbf35587d64d88b3712a96c020-huge-3.

Notes:
– Make sure the App Package contains a Sub Package. Otherwise, we might run into errors as stated in this 
HEUG Technical Forum discussion.
– We can use the %This.SetTileContentAs… methods – %This.SetTileContentAsTwoKPIs() in this case – to override the “Tile Content Type” configured using the Tile Wizard (which we will perform in step 2).
– We can also use the various Tile Class Properties to set the Tile Content (e.g.: KPI values and labels), Live Data (values, trend image and metrics formatting) and Badge Data.

Step 2: Create Tile using Tile Wizard

NavBar > PeopleTools > Portal > Tile Wizard > Create Tile

ab8be9aa2ad1ff81bfb050708d85f0c7-huge-4.
8dc5c95956b1fdeb06de87746e8a12fd-huge-5.

 

Notes:
– We can see that the App Class created in step 1 is referenced as the Data Source.
– Also, the “Tile Content Type” is set to Image in the Wizard configuration level (although it will be overwritten using PeopleCode).

– Similarly, the “Tile Badge” is set to “No” in the Wizard configuration but it can be overwritten using PeopleCode.

cff8fdd2c5e90d3c7d2146fec3b463f1-huge-6.

Note:
– For the purposes of this example, I set the Target Page to “PS Unit”. This can be set to anything as per our requirement.

03954f56ba2b49b1533454cbfdb51586-huge-7.

Note:
– The Tile image is set to PTFP_DEFAULT_CLOUD as a dummy. It will not be used in this case, because we will be overriding the “Tile Content Type” via PeopleCode.

7d6696c4c7be05b4b6dc187e60598459-huge-8.

Step 3: Add Tile to a Fluid Homepage

Fluid Home > Action Menu > Personalize Homepage

0126da15ed8cca404e4e93516e18e872-huge-9.

Results:

99dc9b21815142826bc6b171d11eb0b3-huge-10

Environment Details:

– CS 9.2
– PUM Image 4
– PeopleTools 8.55.12

Related Posts:
Part 2
Part 3

PeopleCode for Reference:

import PTGP_APPCLASS_TILE:Tiles:Tile;

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

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

method getTileLiveData
   / Extends/implements PTGP_APPCLASS_TILE:Tiles:Tile.getTileLiveData /
   
   %This.SetTileContentAsTwoKPIs();
   /* 1 KPI tile content */
   %This.TileKPI_1 = %This.getAmountFormattedValue(1.23456789, “USD”);
   %This.TileKPI_1_Label = “KPI1_1 Label”;
   %This.TileKPI_2 = “KPI_2”;
   %This.TileKPI_2_Label = “KPI_2 Label”;
   
   /* Live Data */
   %This.TileLiveData_1 = “LD_1”;
   %This.TileLiveData_2 = “LD_2”;
   %This.TileLiveData_3 = “LD_3”;
   
   /* A trend arrow is an optional element of live data. */
   %This.hasLivedataTrendImage = True;
   %This.TrendImage = %This.k_strTrendDownImage;
   
   /* Metrics Formatting */
   %This.isTileLiveData_1_Metrics = True;
   rem %This.isTileLiveData_2_Metrics = True;
   rem %This.isTileLiveData_3_Metrics = True;
   
   /* Badge */
   %This.hasLiveDataCount = True;
   %This.TileTransCount = 7;
   
end-method;
 

Fluid UI - Tile Wizard API Part 1: Dynamic Tile Content