PeopleSoft Fluid UI: February 2018

Here we go with Part 2 on how to accomplish this task

Step 1. Create two classic pages in PeopleSoft to add news content, pages can be customized based on your needs.

Page1: This page will be used by the administrator to post the content.
Page:2 This page will be used to add URL's, you can add any other data you want to link to your content

Below is the example:

Page 1

Page2

Step 2. You probably noticed preview button on page 1, this button will display News item preview, to get this simply put HTML area on another secondary page and call it with below logic:

Peoplecode for preview button

&sSearchPage = "NEWS_PREVIEW";

NEWS_WRK.HTMLAREA.Value = GetHTMLText(HTML.NEWS_HTML, &IMAGE, &HEADING, &CONTENT, &HCOLOR, &CCOLOR);

&nModalReturn = DoModal(@("Page." | &sSearchPage), "Preview", - 1, - 1);

HTML code to display HTML area upon clicking preveiw button

<!DOCTYPE html>

<html>

<style>

.w3-container {

padding: 0.01em 16px

}

.w3-container:after,

.w3-container:before,

.w3-row-padding:after,

.w3-row-padding:before {

content: "";

display: table;

clear: both

}

.w3-margin-bottom {

margin-bottom: 10px

}

.w3-orange,

.w3-hover-red:hover {

color: #fff!important;

background-color: #597FCA

}

.w3-row-padding,

.w3-row-padding>.w3-half,

.w3-row-padding>.w3-third,

.w3-row-padding>.w3-twothird,

.w3-row-padding>.w3-threequarter,

.w3-row-padding>.w3-quarter,

.w3-row-padding>.w3-col {

padding: 0 8px

}

.w3-col,

.w3-half,

.w3-third,

.w3-twothird,

.w3-threequarter,

.w3-quarter {

float: left;

width: 100%

}

.w3-col {

padding: 0 8px

}

.iconDetails {

float: bottom;

height: 120px;

width: 120px;

width: auto;

margin-top:20px

}

.content {

white-space: pre-wrap;

word-wrap: break-word;

text-align: justify;

font-size: 1em;

width: auto;

color: % Bind(:5);

font-family: 'Quattrocento', serif;

}

.header {

font-size: 1.5em;

width: auto;

font-family: 'Quattrocento', serif;

color: % Bind(:4);

}

.div:empty {

display: none;

}

.nolinkdiv { display:none; }

ul li a[href=""] {

display: none;

}

ul li a[href=""] + div {

display: block;

}

</style>

<body>

</div>

</div>

</div>

</body>

</html>

Step 3. Create a Fluid page with grid, this grid will have just two columns, News ID and HTML Area field

Step 4. Populate HTML area with the content created on page 1 and Page 2 from step 1

Populate the HTML area of the grid with all news items.

PeopleCode:

If &CCLEVEL1_Cnt >= 1 Then

&CCLEVEL1.Sort(NEWS.EFFDT, "D");

For &I = &CCLEVEL1_Cnt To 1 Step - 1

&NewsId = &CCLEVEL1(&I).NEWS.NEWS_ID.Value;

SQLExec("SELECT PTBR_OBJNAME,HEADING_TEXT,LONGJOBNAME2,HEADING_COLOR,CONTENT_COLOR, URL_1,DESCR100A,URL_2,DESCR100B,URL_3,DESCR100C,URL_4,DESCR100D,URL_5,DESCR100E FROM PS_NEWS WHERE NEWS_ID = :1", &CCLEVEL1(&I).NEWS.NEWS_ID.Value, &IMAGE, &HEADING, &CONTENT, &HCOLOR, &CCOLOR, &URL1, &DESCR1, &URL2, &DESCR2, &URL3, &DESCR3, &URL4, &DESCR4, &URL5, &DESCR5);

&CCLEVEL1(&I).GetRecord(Record.NEWS_WRK).HTMLAREA2.Value = GetHTMLText(HTML.NEWS_HTML, &IMAGE, &HEADING, &CONTENT, &HCOLOR, &CCOLOR, &URL1, &DESCR1, &URL2, &DESCR2, &URL3, &DESCR3, &URL4, &DESCR4, &URL5, &DESCR5);

End-For;

End-If;

HTML

<!DOCTYPE html>

<html>

<style>

.w3-container {

padding: 0.01em 16px

}

.w3-container:after,

.w3-container:before,

.w3-row-padding:after,

.w3-row-padding:before {

content: "";

display: table;

clear: both

}

.w3-margin-bottom {

margin-bottom: 10px

}

.w3-orange,

.w3-hover-red:hover {

color: #fff!important;

background-color: #597FCA

}

.w3-row-padding,

.w3-row-padding>.w3-half,

.w3-row-padding>.w3-third,

.w3-row-padding>.w3-twothird,

.w3-row-padding>.w3-threequarter,

.w3-row-padding>.w3-quarter,

.w3-row-padding>.w3-col {

padding: 0 8px

}

.w3-col,

.w3-half,

.w3-third,

.w3-twothird,

.w3-threequarter,

.w3-quarter {

float: left;

width: 100%

}

.w3-col {

padding: 0 8px

}

.iconDetails {

float: bottom;

height: 120px;

width: 120px;

width: auto;

margin-top:20px

}

.content {

white-space: pre-wrap;

word-wrap: break-word;

text-align: justify;

font-size: 1em;

width: auto;

color: % Bind(:5);

font-family: 'Quattrocento', serif;

}

.header {

font-size: 1.5em;

width: auto;

font-family: 'Quattrocento', serif;

color: % Bind(:4);

}

.div:empty {

display: none;

}

.nolinkdiv { display:none; }

ul li a[href=""] {

display: none;

}

ul li a[href=""] + div {

display: block;

}

</style>

<body>

</div>

</div>

</div>

</body>

</html>

Result of above code on Fluid page

Step 5. Now create application package to populate HTML area on the Fluid Tile, remember content on this will be dynamic

Peoplecode for App Package:

import PTGP_APPCLASS_TILE:Tiles:Tile;

class ViewHCMCNews extends PTGP_APPCLASS_TILE:Tiles:Tile

method ViewHCMCNews();

method getTileLiveData();

end-class;

method ViewHCMCNews

%Super = create PTGP_APPCLASS_TILE:Tiles:Tile();

end-method;

method getTileLiveData

/+ Extends/implements PTGP_APPCLASS_TILE:Tiles:Tile.getTileLiveData +/

%This.SetTileContentAsHTML();

Local string &IMAGE, &HEADING, &CONTENT, &YEAR, &MONTH, &DATE, &USER;

SQLExec("SELECT TOP 1 P.PTBR_OBJNAME,P.HEADING_TEXT,P.LONGJOBNAME2 FROM PS_NEWS P WHERE P.EFFDT = (SELECT MAX(PP.EFFDT) FROM PS_NEWS PP WHERE PP.STATUS = 'A' AND PP.EFFDT <= GETDATE()) AND P.STATUS = 'A'", &IMAGE, &HEADING, &CONTENT);

%This.TileHtmlArea = GetHTMLText(HTML.NEWS_LIVE_TILE_HTML, &IMAGE, &HEADING, &CONTENT);

SQLExec("SELECT TOP 1 DATENAME(year, P.DATE) ,DATENAME(month, P.DATE) ,DATENAME(day, P.DATE) Your SQL", &YEAR, &MONTH, &DATE, &USER);

%This.hasLiveDataDescr = True; /* Enables the live data area. */

end-method;

HTML Area for Tile, this is crucial, previous HTML area we created for preview and grid will not work here:

<style>

.w3-container {

padding: 0.01em 10px

}

.w3-container:after,

.w3-container:before,

.w3-row-padding:after,

.w3-row-padding:before {

content: "";

display: table;

clear: both

}

.w3-margin-bottom {

margin-bottom: 5px

}

.w3-orange,

.w3-hover-red:hover {

color: #fff!important;

background-color: #F67280

}

.w3-row-padding,

.w3-row-padding>.w3-half,

.w3-row-padding>.w3-third,

.w3-row-padding>.w3-twothird,

.w3-row-padding>.w3-threequarter,

.w3-row-padding>.w3-quarter,

.w3-row-padding>.w3-col {

padding: 0 8px

}

.w3-col,

.w3-half,

.w3-twothird,

.w3-threequarter,

.w3-quarter {

float: left;

width: 100%

}

.w3-third {

float: left;

width: 100% margin-bottom: 20px;

}

.w3-col {

padding: 0 8px

}

.ImageDetails {

float: top;

height: 50px;

width: 50px;

width: auto;

}

.content {

white-space: pre-wrap;

word-wrap: break-word;

text-align: justify;

font-size: 1em;

width: auto;

color: blue;

font-family: 'Quattrocento', serif;

}

.header {

font-size: 1.2em;

width: auto;

font-family: 'Quattrocento', serif;

color: white;

}

.box {

-o-text-overflow: ellipsis;

/* Opera */

text-overflow: ellipsis;

/* IE, Safari (WebKit) */

overflow: hidden;

/* don't show excess chars */

white-space: pre-line;

/* force single line */

width: 100%;

height: 200px;

}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

from {

background-color: #ff7f2a;

}

to {

background-color: green;

}

/* Standard syntax */

@keyframes example {

from {

background-color: #2552AC;

}

to {

background-color: #4586FF;

}

.div {

background-color: #597FCA;

border-radius: 50px;

-webkit-animation-name: example;

/* Safari 4.0 - 8.0 */

-webkit-animation-duration: 10s;

/* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 0.3s;

border-radius: 50px;

}

</style>

<body>

</div>

</div>

</div>

</body>

Take a keen look at CSS on this HTML area which is creating the animation effect and controlling text areas.

Step:6. Create Tile from tile wizard, select application package as tile content and select the class you created for this tile and publish the tile.

Thats it!

PeopleSoft Fluid UI

Friday, February 23, 2018

PeopleSoft News Tile with HTML Area using CSS Part 2

Using Third party Tools to create Chatbot in PeopleSoft Part 3