Clarity

Expand all | Collapse all

HTML Portlet with Grid functionality

  • 1.  HTML Portlet with Grid functionality

    Posted 12-08-2014 11:49 PM

    Hello Folks,

     

    Hope you all doing great!

    I have created a HTML portlet, In which some fields are like High medium low kind of Images Like in GRID. But I am not able to find the way to show the same as Green red yellow in HTML portlet can some one please Guide.

     

    Thanks

    AD



  • 2.  Re: HTML Portlet with Grid functionality

    Posted 12-09-2014 03:21 AM

    Would you like to share your portlet and give a screenshot.



  • 3.  Re: HTML Portlet with Grid functionality

    Posted 12-09-2014 05:05 AM

    Hey Urmas,

     

    In my POrtlet I am not able to upload Image.

    in POrtlet There is one Attribute is

     

    Status Indicator : YELLOW

     

    In Grid Portlet We can change this Yellow to Yellow Color Image attribute but in HTML i dont know how to do that



  • 4.  Re: HTML Portlet with Grid functionality

    Posted 12-09-2014 07:24 AM

    What is your html code.

    Somebody with more html knowledge than me, could suggest how to do that. Does not sound that challenging.



  • 5.  Re: HTML Portlet with Grid functionality

    Posted 12-11-2014 12:30 AM

    Have you checked this ?

    HTML portlet issue

    https://communities.ca.com/message/2301464#2301464

     

    "

    typical image references in Clarity are like this:   src ="ui/evolution2/images/GlobalHome.gif"

     

    which in absolute terms will be like this:

     

    http:// >/niku/ui/evolution2/images/GlobalHome.gif locate your image relative to the /ui/* folder set, not webroot, then you should be able to reference the image in your html.  "

     

    NJ



  • 6.  Re: HTML Portlet with Grid functionality



  • 7.  Re: HTML Portlet with Grid functionality

    Posted 12-11-2014 03:11 AM

    In addition to what NJ wrote about paths, Clarity uses a sprite for those icons, so you will have to get the sprite image, and then display the appropriate region.

     

    If drop this into an HTML portlet (at least in v13.x), you should see all icons as a single image plus Red, Yellow and Green individually.

    <html>
      <head>
      </head>
      <body>
      <h4>Here's your sprite: </h4><img src="ui/uitk/images/odf.png" />
      <h4>Here are your Green Yellow Red:</h4>
      <table>
      <tr>
      <td></td>
      <td></td>
      </tr>
      <tr>
      <td>Green</td>
      <td><img src="ui/uitk/images/s.gif" border="0" name="Green" alt="Green" title="Green" style="width: 16px; height: 16px; background: url(ui/uitk/images/odf.png) no-repeat -48px -0px" align="absmiddle"></td>
      </tr>
      <tr>
      <td>Yellow</td>
      <td><img src="ui/uitk/images/s.gif" border="0" name="Yellow" alt="Yellow" title="Yellow" style="width: 16px; height: 16px; background: url(ui/uitk/images/odf.png) no-repeat -144px -0px" align="absmiddle"></td>
      </tr>
      <tr>
      <td>Red</td>
      <td><img src="ui/uitk/images/s.gif" border="0" name="Red" alt="Red" title="Red" style="width: 16px; height: 16px; background: url(ui/uitk/images/odf.png) no-repeat -112px -0px" align="absmiddle"></td>
      </tr>
      </table>
      </body>
    </html>
    
    

     

    Sprite.jpg