Saturday, July 9, 2016

Fluid UI - Custom Development - Twitter Feed As a Tile

Fluid Tiles can display dynamic content. I was curious how we can use the Fluid Tiles to display dynamic content from an external source, e.g.: Twitter Feed.

Here are the steps I followed to create a Fluid Tile which displays a Twitter Feed.

Step 1: Create a Twitter Widget using your Twitter account

Twitter > Settings > Widgets

Enter your Search Query and configure your widget settings as per your requirement. Copy the HTML code that is provided at the bottom right of the page.


Step 2: Store the Twitter HTML in a HTML Object


Step 3: Create an IScript that renders the Twitter HTML


PeopleCode for Reference:

Function IScript_Twitter_Feed()
   %Response.Write(GetHTMLText(HTML.CSK_TWITTER_FEED));
End-Function;

Step 4: Create a Fluid Content Reference with Tile Properties referencing the Twitter IScript

I created a Content Reference as a Non-Peoplesoft URL and referenced the custom IScript (created in Step 3) in the Content Reference > Fluid Attributes > Dynamic Tile Content section.



Results:

Now we are ready to test this tile. I added it to a custom homepage and voila!



2 comments: