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!
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!
That's looking cool and colorful :-)
ReplyDeleteThanks Logesh! :)
Delete