IBM Apptio

IBM Apptio

A place for Apptio product users to learn, connect, share and grow together.

 View Only

  • 1.  HTML to mimic KPI Comparison

    Posted Thu May 18, 2023 05:16 PM

    I have a use case where I need to create KPIs with two values as secondary.   I have not found a way to do this using the standard KPI function so I went the route of the using HTML to mimic the KPI but allows me to put two secondary values thanks to other posts on how to mimic the KPI.

     What I am unable to figure out is the HTML code that would mimic the comparison (Trend up or down- with an Arrow) between one of the secondary elements (like this)

    I found this link below which gave me some ideas but it doesn't do the red/green or the arrows up or down
    https://community.ibm.com/community/user/apptio/discussion/kpi-comparison#bmdea17d54-18c0-4faa-ad21-a1eb71c40414
    Any ideas?


    #CostingStandard(CT-Foundation)


  • 2.  RE: HTML to mimic KPI Comparison

    Posted Thu June 22, 2023 12:36 PM
    Edited by David Eyres Tue November 05, 2024 06:27 PM

    Hi Pam

    This may not work on all platforms so if you are using non Windows devices to view it then it wont work, but have a look at this code and see if it works for you. Remember to test with all your users devices before rolling out. 

    <!DOCTYPE html>
    <html>
    <head>
    <style>

    div.Background{
    background:#ffffff;
    }

    div.Title{
    background:#ffffff;
    font-size: 14px; 
    font-weight:bold; 
    color: #004C76; 
    margin-left: 5px;
    }

    div.MainText{
    color:#000000;
    font-size:35px;
    font-weight:bold; 
    margin-left: 5px;
    }

    div.YTD{
    color:#000000;
    font-size:12px;
    font-weight:bold; 
    margin-left: 5px;
    color: #404040; 
    }

    Comparison{
    line-height: 80%;
    font-size:16px;
    font-weight:bold; 
    margin-left: 5px;
    color: #ff0000; 
    }

    arrowfont
    { font-family: "Wingdings 3"
    }

    </style>
    </head>

    <body>
    <div class="Background">
    <hr size=3 color=#ff661c>
    <div class="Title"> 
    This is the title

    </div>

    <div class="MainText"> 
    Main KPI Text 
    <Comparison>
     Red 
    </Comparison> 
    <%=icon("3arrows",Cost Source Master Data.Amount<100,Cost Source Master Data.Amount<200,Cost Source Master Data.Amount>201)%>
    <arrowfont>hi</arrowfont>
    </div>

    <div class="YTD"> 
    This is the YTD
    </div>
    </div>

    This is using the Icon() function. You'll need to replace the Cost Source Master Data.Amount with the logic you want to use if you are ok with the Arrow in that format. 

    If you want bigger arrows more like the one you have in the example then you can use Wingdings 3 font and use that, but you would need to put in something like <%=if(This month<last month,"i","h") between the <arrowfont> </arrowfont>

    Ive put in the Icon() logic and the Wingdings icons so you can choose which works best for you. 


    Original Message