Platform

Platform

 View Only
Expand all | Collapse all

How to make HTML/CSS results appear as active hyperlink

  • 1.  How to make HTML/CSS results appear as active hyperlink

    Posted Fri March 15, 2019 09:14 AM

    I'm using the code below in an HTML box on a report.  The "Projects Master Data.Project_Site" returns a link.  However, now the link is just plain text.  Is there a way to make the link an active hyperlink?

     

     

    <div
    class="appsText"
    align="left"
    style="padding:10px 0px 0px 0px;
    font-size:10px;color:#004C76;">
    <b><%=Projects Master Data.Project_Site%></b>
    </br>


    #Platform


  • 2.  Re: How to make HTML/CSS results appear as active hyperlink

    Posted Fri March 15, 2019 09:19 AM

    I am by no means a HTML expert, however if you type everything in a email, and send to yourself, you can open the email go to actions>other actions>view source and it will give you the HTML code.

     

    If you add a link in there it should add it, now this gets to be fairly long HTML code so you can always disect it and figure it out also


    #Platform


  • 3.  Re: How to make HTML/CSS results appear as active hyperlink

    Posted Fri March 15, 2019 09:24 AM
    • Specify the target in the <a href=" ">.
    • Then add the text that should work as a link.
    • Finally add an </a> tag to indicate where the link ends.

    #Platform


  • 4.  Re: How to make HTML/CSS results appear as active hyperlink

    Posted Fri March 15, 2019 09:42 AM

    @Menno Wittebol I tried the code below, but its not yielding any results now.  Does this look right:

    <div
    class="appsText"
    align="left"
    style="padding:10px 0px 0px 0px;
    font-size:10px;color:#004C76;">
    <b><a href="<%=Projects Master Data.Project_Site%>"></a></b>
    </br>


    #Platform


  • 5.  Re: How to make HTML/CSS results appear as active hyperlink

    Posted Fri March 15, 2019 09:54 AM

    Hi @Travis Cole, if I focus only on the part <b><a href="<%=Projects Master Data.Project_Site%>"></a></b> I recommend to add a correct URL between the quotes that starts with http:// or https:// 


    #Platform


  • 6.  Re: How to make HTML/CSS results appear as active hyperlink

    Posted Fri March 15, 2019 11:05 AM

    I see more HTML issues in your code. Please see the following site where you can get the correct HTML codes: https://www.w3schools.com/html/default.asp


    #Platform


  • 7.  Re: How to make HTML/CSS results appear as active hyperlink

    Posted Fri March 15, 2019 09:30 AM

    Doug, I use hyperlinks in both HTML components and in tables and they are great.  Here's a great resource.

    HTML Links 

     

    Here's one of my scripts:

    <a href="-@Ccompany.com%253APublic+Cloud/Reports/.DateGoesHere/CostModels/Default/.View%253Atab%253APublic+Cloud" rel="nofollow" target="_blank">https://company-r12.apptio.com/#report:prd:-@Ccompany.com%253APublic+Cloud/Reports/.DateGoesHere/CostModels/Default/.View%253Atab%253APublic+Cloud-@Ccompany.com%253APublic+Cloud/Reports/.DateGoesHere/CostModels/Default/.View%253Atab%253APublic+Cloud" target="_blank">
    <div align="center">
    <img src="https://company-dev.apptio.com/graphics/IconExperience/v_collections_png/objects_people_industries/48x48/shadow/cloud.png">
    <br>

    <div align="center"><font size=5 color="003ca6" face="Calibri">Cloud<br>
    </div>
    <br>
    <hr>

    <div align="center">
    <font size=3 color="003ca6" face="Calibri">View Azure and AWS spend (opens in separate application)</font>

    </div><br>
    <br>

     

    This create a button affect like the new R12 looking buttons and makes the whole thing a hyperlink.


    #Platform


  • 8.  Re: How to make HTML/CSS results appear as active hyperlink

    Posted Fri March 15, 2019 11:30 AM

    I guess I didn't explain the original issue.  In the code below, the "Projects Master Data.Project_Site" returns a different link based on what Project the overall report is filtered on.  For example, when I'm filtered on Project R106862Q, I see the link below in the report. 

     

    However, you can't clink on the link and go to that site.

     

    Current Code:

    <div 
    class="appsText" 
    align="left"
    style="padding:10px 0px 0px 0px;
    font-size:10px;color:#004C76;">
    <b><%=Projects Master Data.Project_Site%></b>
    </br>


    #Platform


  • 9.  Re: How to make HTML/CSS results appear as active hyperlink

    Posted Fri March 15, 2019 04:36 PM

    Hi @Doug Copeland, I believe that @Menno Wittebol was on the right track...

     

    Please take a look at the code below.  The text in blue identifies the URL that will be navigated to, and the red text represent the actual text that will be displayed on the screen.  The target="_blank" piece is optional - this just makes the link open in a new tab on your browser.

     

    Assumptions:

    The "Project_Site" column in your "Project Master Data" dataset contains the URL: https://palm-prd/PWA/R106862Q - iDS - Work Package.  I also assume that this column is referenced in the Ad Hoc Query for the HTML component.    

     

    Caveat:

    URL's do not typically have spaces in them - this is why URL's sometimes have text like "%20" in them, to represent a space - so I would make sure that the URL works correctly or you may need to address this.

     

    Code:

    <div 
    class="appsText" 
    align="left"
    style="padding:10px 0px 0px 0px;
    font-size:10px;color:#004C76;">
    <b>

    <a href="<%=Projects Master Data.Project_Site%>" target="_blank"><%=Projects Master Data.Project_Site%></a>

    </b>
    </br>

     

    Hope that helps!


    #Platform


  • 10.  Re: How to make HTML/CSS results appear as active hyperlink

    Posted Wed March 20, 2019 01:14 PM

    @Samir Banker this worked.  Thank you for your help.


    #Platform


  • 11.  Re: How to make HTML/CSS results appear as active hyperlink

    Posted Wed March 20, 2019 02:08 PM

    @Doug Copeland - That's great to hear!  Glad I could help 


    #Platform