Tuesday, April 11, 2017

Fluid UI - Tile Wizard API for Dynamic Tile Content

PeopleTools 8.55 introduced the Tile Wizard App Classes which enable us to use the API to dynamically modify Tile Content.

PeopleBooks: Tile 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.


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



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



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.


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.


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.


Step 3: Add Tile to a Fluid Homepage

Fluid Home > Action Menu > Personalize Homepage


Results:


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;

6 comments:

  1. Hi there! First off, great tutorial! Already thinking of all the things I can do with this.

    I'm curious, is there anyway to control properties of the tile itself like height and width? Or is that only possible through the CRef you select?

    ReplyDelete
    Replies
    1. another question, is it possible to disable the link to the CRef? Disabling the main hotspot seems to override the custom app package.

      Delete
    2. Hi Eric - Good questions! The first one would be a great enhancement idea. I don't think there is any way we can dynamically adjust the Tile dimensions. Interesting thing I found is that once we use the tile wizard, the Tile CREF that is generated no longer has the 'Fluid Attributes' tab, since it is created as a CREF link. We will need to adjust the properties on the underlying CREF.
      Refer CREF Link: https://snag.gy/0TcgGs.jpg
      Refer CREF: https://snag.gy/W3hvUc.jpg

      You second question is actually worth a separate blog post! :)

      I found the solution to your problem, instead of setting the 'Disable Main Hotspot' on the Tile Wizard, go to the actual CREF that you would end up on (in my example https://snag.gy/K9LP5E.jpg) when you click on the Tile and set the 'Disable Main Hotspot'.

      Let me know if this makes sense!

      Delete
  2. Hi Sasank, I am getting a error when attempting dynamic content on a tile...in step 3 of Tile Wiz when I tried to select my Content Ref, I am getting an error "There is no current buffer context." Have you seen this before? I traced it back to the SetCRefListArea function that uses Getlevel0() but somehow my new CF for the tile is blowing it up...have you seen this before or have you tried with a new CF instead an existing one? Thanks!

    ReplyDelete
    Replies
    1. Nevermind...the client had 8.55.08 tools on 9.1. I tried the same in 8.55.09 in 9.2 and it worked fine. Now applying patch for 8.55.15...

      Delete
    2. Ricky - Thanks for letting us know! Glad to hear that you figured it out.

      Delete