Prashank Singh

HTML Fancy Lookups: Getting Started

Blog Post created by Prashank Singh on May 9, 2017

CA PPM Lookups are powerful and widely used while achieving customization from getting dynamic values based on user login to parameter mapping or cascaded value into different lookup etc. Today we are going to learn how to leverage Lookups power to render Html into CA PPM pages to achieve some fancy stuffs.

 

Before we go into code, here are some examples of fancy html lookups.

 

               <------------------------------------- Screenshots go here ---------------------------------->

 

Screen#1 Video saved in Knowledge Store and embedding Youtube Video - used in organizations for communication  and trainings purpose and help videos for Project / Approval Process.

 

 

Screen#2 Images linked to JasperReport - For running jasper report inside instance,

example: running Project Status Report from Project general page.

 

sample backend URL: /reportservice/flow.html?_flowId=viewReportFlow&reportUnit=/shared/reports/ProfileReport&standAlone=true&decorate=no&ParentFolderUri=/shared/reports&ResourceId=5001005&output=pdf

Jasper report Output:

 

 

Screen#3 Interactive web page with Canvas and input control - For creative UI and input controls for changing view.

               

 

Possible benefit in CA PPM:

1) More flexible view with better user experience

2) Interactive data input based on dynamic parameters passed to html.

3) Knowledge Store for saving html and javascript for easy administration.

 

How can we achieve Html inside lookup?

 

For any CA PPM Lookup to render html inside page via lookup you need to set following lookup properties.

 

1) Create a Dynamic Lookup with some html data to display.
      For example:
               <------------------------------------- Code goes here ------------------------------------------->
                     SELECT
                             @select:1:id@
                            ,@select:html_display:html_display@
                     FROM
                           (SELECT
                                 '<!DOCTYPE html>
                                          <html>
                                             <body>
                                                  <div id="page">
                                                  <div id="logo">
                                                <h1><a href="/" id="logoLink">My First Website</a></h1>
                                                   </div>
                                                <div id="nav">
                                                <ul>
                                                <li><a href="#/home.html">Home</a></li>
                                                <li><a href="#/about.html">About</a></li>
                                                <li><a href="#/contact.html">Contact</a></li>
                                                </ul>
                                             </div>
                                       <div id="content">
                                       <h2>Home</h2>
                                           <p>
                                               This is my first webpage! I was able to code all the HTML and CSS in order to make it. Watch out world of web design here I come!
                                          </p>
                                          <p>
                                                   I can use my skills here to create websites for my business, my friends and family, my C.V, blog or articles. As well as any games or more experiment stuff (which is what the web is really all about).
                                          </p>
                                         </div>
                                 <div id="footer">
                                       <p>Webpage made by <a href="/" target="_blank">[your name]</a> </p>
                                 </div>
                                 </div>
                              </body>
                              </html>' as html_display
                           FROM DUAL) Html_sql
               <------------------------------------- Code Ends ----------------------------------------->


2) Create an attribute in custom Object with this Lookup
3) Set Lookup Default Value
4) Set Lookup to Read Only
5) Set "Populate default where null", in case you have already created instance before this attribute creation.
6) Place this Attribute in Create, Edit, filter layout (Note: It does not work in List).
7) Set this Attribute to Pull-Down instead of Browse from Fields 

Let's Check how our First Html Lookup looks like:
               <---------------------------------- Screenshots go here ---------------------------------->

Screen#1 Filter Layout
                  

 

Screen#2 Create Layout

 

Screen#3 Edit Layout


                

However, Lookup has some limitations. We can not put large sql inside dynamic lookup as it has restrictions. So, this leads to use of knowledge store to save web documents and images, which we can call in our query to achieve better dynamic approach and easy administration.

Let's achieve some HTML rendering via Knowledge Store.

Please find attached Timeline.html file as an attachment, this file need to be placed in KS and link needs to be modified in code as highlighted in bold.

 

1) Create a Dynamic Lookup with some html data to display.
For example:
               <--------------------------------- Code goes here --------------------------------------------->

        SELECT
           @select:1:id@
          ,@select:Html_display:Html_display@
       FROM
       ( SELECT
         ' <iframe
         src = "../niku/app?action=dms.viewFile&RhXm0r7tSeUqEr=true&fileId=5000039&fileName=Timeline.html"
                  width = "400%"
                   height = "300"
                   scrolling = "yes" />' as Html_display

         FROM DUAL ) Html_SQL


               <--------------------------------- Code Ends ---------------------------------------------->
2) Create an attribute in custom Object with this Lookup.
3) Set Lookup Default Value.
4) Set Lookup to Read Only.
5) Set "Populate default where null", in case you have already created instance before this attribute creation.
6) Place this Attribute in Create, Edit, filter layout (Note: It does not work in List).
7) Set this Attribute to Pull-Down instead of Browse from Fields.

Lets Check how our First Html Lookup collaborated with Knowledge Store is looking Now.
               <------------------------------------ Screenshots go here ---------------------------------->

             

By using these fancy lookups, you can also achieve Project Task interactive Timelining, Status Indicator over Project, Inline of Sub Object inside Master Object, Navigation with Status Indicator. Also, lot of other stuff  can be achieved as your creative thinking goes.

 

 

Upcoming Post:

Next Blog will be on Inline view of sub-object inside Master Object with Project Phase indicator and task timeline, stay connected 

Attachments

Outcomes