Thursday, March 22, 2018

SEARCH in Fluid Pages

PeopleSoft Fluid does not have default search page like in Classic. There are 3 ways for now to create your search page:

1. Real-Time Search using Pivot Grids
2. Keyword Search using SES
3. Custom Search Page

Here are the brief details on how to configure these search pages:

1. Real-Time Search using Pivot Grids


Create a pivot grid using the Pivot Grid Wizard (Reporting Tools-Pivot Grid-Pivot GridWizard),using your component as the data source. The Pivot Grid Wizard then generates the underlying query using the search keys defined on the records in the component and populates the search page.

2. Keyword Search using SES


The keyword search runs against a search index built using the PeopleSoft Search Framework and deployed to the search engine, such as Oracle SES. The search will not reflect changes to the database table until the search indexes are refreshed.

3. Custom Search Page


You can create your own search page and define it as a page type of search page. When you put the search page in your component it will run after SearchInit and before SearchSave PeopleCode. 

You will have access to the component buffer to set fields as needed but the page is not in the component buffer. So all of the PeopleCode must be in record field events and not in component PeopleCode events. 

Note: It is recommended to clone the delivered search pages (PTS_NUI_SEARCH or PTS_NUI_SEARCH_S) and make the changes you need.
at No comments:

Wednesday, March 7, 2018

Populate custom image (JPG, PNG or GIF) on Fluid Tile

Generally, when setting up tile image in PeopleSoft Fluid, the system accepts only SVG images, but you can bypass this constraint in the following way:

1. Create the image in application designer XYZ_IMG in your desired format.

2. Create HTML definition XYZ_HTML to display image in HTML area

<a href="https://tst-web-epsi/homepage/aspx/login.aspx" target="_blank"> 
<img border="0" alt="IMG" img src="%Image(XYZ_IMG)" width="130" height="130">
</a>

Make sure to set image width and height to match your tile size.

3. Create application package and insert a class, like below








4. Add following method to viewHTML class

/*Display HTML Tile area with Image*/
import PTGP_APPCLASS_TILE:Tiles:Tile;

 class ViewHTML extends PTGP_APPCLASS_TILE:Tiles:Tile
   method ViewHTML();
   method getTileLiveData();
end-class;

 method ViewHTML
   %Super = create PTGP_APPCLASS_TILE:Tiles:Tile();
end-method;

 method getTileLiveData
   /+ Extends/implements PTGP_APPCLASS_TILE:Tiles:Tile.getTileLiveData +/
      %This.SetTileContentAsHTML();
      %This.TileHtmlArea = GetHTMLText(HTML.XYZ_HTML);
      %This.hasLiveDataDescr = True; /* Enables the live data area. */
      Local string &String;
      &String = "Test Environment";
      %This.TileLiveData_1 = &String;
end-method;

 5. Navigate to tile wizard, PeopleTools - Portal - Tile Wizard, select desired folder from navigation collection and click Create New Tile.

On the second page select the appropriate app class you created in step 3 of this process.








On page 3 and 4 select appropriate options like which content reference your tile belongs to, tile size etc and save the tile.

6. Add your newly created tile to the homepage, you will now see the new image on your tile.


at No comments:

Thursday, March 1, 2018

Viewport Meta Tag on PeopleSoft Fluid Pages

The viewport is the visible area of a page. By default, the browsers attempt to load the entire page onto the viewport. This makes the page appear very small on some tablets and phones. You should set the PeopleTools default viewport on the post-build of every component and page activate of secondary pages to avoid this problem. 

There is a function in 8.54 and a method in 8.55 that will allow you to set this.

 In 8.54

 Declare Function SetViewport PeopleCode PTLAYOUT.FUNCLIB FieldFormula;
SetViewport(""); /* apply the system default viewport setting */

In 8.55

 import PT_PAGE_UTILS:*;
Local PT_PAGE_UTILS:Utils &oPageUtils = create PT_PAGE_UTILS:Utils();
&oPageUtils.SetDefaultViewport();
at No comments:

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 No comments:
Labels:
Subscribe to: Posts (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...