Friday, February 23, 2018

PeopleSoft News Tile with HTML Area using CSS Part 2

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>
<link href="https://fonts.googleapis.com/css?family=Quattrocento" rel="stylesheet">

<body>

    <div class="w3-container w3-orange w3-margin-bottom header">
        <h1>% Bind(:2) </h1>
    </div>
    <div class="w3-row-padding ">
        <div class="w3-twothird">
            <img style="margin-bottom: 1px; border-radius: 8px;" border="0" alt="No Image Found" img src="%Image(% Bind(:1))" class='iconDetails'>
        </div>
        <div class="w3-third content">
            <p>% Bind(:3)</p>
            <a class="w3-third content" href="% Bind(:6)" target="_blank">% Bind(:7)</a>
            <a class="w3-third content" href="% Bind(:8)" target="_blank">% Bind(:9)</a>
            <a class="w3-third content" href="% Bind(:10)" target="_blank">% Bind(:11)</a>
            <a class="w3-third content" href="% Bind(:12)" target="_blank">% Bind(:13)</a>
            <a class="w3-third content" href="% Bind(:14)" target="_blank">% Bind(:15)</a>
        </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>
<link href="https://fonts.googleapis.com/css?family=Quattrocento" rel="stylesheet">

<body>

    <div class="w3-container w3-orange w3-margin-bottom header">
        <h1>% Bind(:2) </h1>
    </div>
    <div class="w3-row-padding ">
        <div class="w3-twothird">
            <img style="margin-bottom: 1px; border-radius: 8px;" border="0" alt="No Image Found" img src="%Image(% Bind(:1))" class='iconDetails'>
        </div>
        <div class="w3-third content">
            <p>% Bind(:3)</p>
            <a class="w3-third content" href="% Bind(:6)" target="_blank">% Bind(:7)</a>
            <a class="w3-third content" href="% Bind(:8)" target="_blank">% Bind(:9)</a>
            <a class="w3-third content" href="% Bind(:10)" target="_blank">% Bind(:11)</a>
            <a class="w3-third content" href="% Bind(:12)" target="_blank">% Bind(:13)</a>
            <a class="w3-third content" href="% Bind(:14)" target="_blank">% Bind(:15)</a>
        </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. */
   %This.TileLiveData_2 = "Posted by " | &USER | " on " | &MONTH | " " | &DATE | " " | &YEAR;
end-method;


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

<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<link href="https://fonts.googleapis.com/css?family=Quattrocento" rel="stylesheet">

<body>

    <div class="w3-container w3-orange w3-margin-bottom header div">
        <h1>% Bind(:2) </h1>
    </div>

    <div class="w3-row-padding ">
        <div class="w3-twothird">
            <img style="margin-bottom: 1px;" border="0" alt="No Image Found" img src="%Image(% Bind(:1))" class='ImageDetails'>
        </div>
        <div class="w3-third content box  content">


<marquee behavior="scroll" direction="up" scrollamount="2">% Bind(:3)</marquee>

  
        </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!



at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Using Third party Tools to create Chatbot in PeopleSoft Part 3

This is final post to demo the working chatbot in PeopleSoft. Kommunicate supplies you with HTML code to add their chat badge on your Peo...