Discussions

Expand all | Collapse all

Displaying Quickbase data utilizing HTML & CSS

  • 1.  Displaying Quickbase data utilizing HTML & CSS

    Posted 30 days ago
    I am trying to create a form for view purposes only.  This form needs to be presented to an executive committee. (I don't want a word doc/pdf. ) I have seen stuff online that describes rich text pages and code text pages but this just describes displaying static data. (i.e. "Hello world.") . I want to display a single Quickbase record but format the display using HTML/CSS. I have seen a reference which states:"You can use text pages to store XSL / XSLT style sheets. You can then display a report or record using your XSL styles."  Can anyone please provide some examples that I can reference using stylesheets or Rich Text pages? Thank you.

















    ------------------------------
    John Sampath
    ------------------------------


  • 2.  RE: Displaying Quickbase data utilizing HTML & CSS

    Posted 30 days ago
    I mocked up a quick field to demonstrate the concept.  This is using the value in the "Data Test" field in a button.  The concept is the same for all other HTML tags supported by Quick Base.

    "<a style=\" text-decoration: none; background: #008000; border-radius: 5px; color: #fff; display: inline-block; width: 75px; text-align: center; padding: 8px 5px; font: normal 700 14px/1 \"Calibri\", sans-serif; text-shadow: none; \">" & [Data Test] & "</a>"

    ------------------------------
    Paul Peterson
    ------------------------------



  • 3.  RE: Displaying Quickbase data utilizing HTML & CSS

    Posted 30 days ago
    Thank you sir for the response. The syntax makes sense but I have some follow up questions
    I can create a rich text field and embed this code in it. However I would like to be able to use this in a code page. How do I pass a a specific record's  Data Test value to the code page. (i.e. user selects a records, clicks, code page comes up.) Thank you.

    ------------------------------
    John Sampath
    ------------------------------



  • 4.  RE: Displaying Quickbase data utilizing HTML & CSS

    Posted 30 days ago
    I'm sorry if I misunderstood your question.  I haven't done much with code pages, but I'm certain they are in my immediate future.

    ------------------------------
    Paul Peterson
    ------------------------------



  • 5.  RE: Displaying Quickbase data utilizing HTML & CSS

    Posted 30 days ago
    John
    Have you considered using a formula rich text field?

    ------------------------------
    Mark Shnier (YQC)
    Quick Base Solution Provider
    Your Quick Base Coach
    http://QuickBaseCoach.com
    mark.shnier@gmail.com
    ------------------------------



  • 6.  RE: Displaying Quickbase data utilizing HTML & CSS

    Posted 29 days ago
    Hi Mark, 

    I have  considered formula rich text fields, but I would have to create one for every field. I would like to avoid doing that if possible using a code page. Is there a way to do this please? 







    ------------------------------
    John Sampath
    ------------------------------



  • 7.  RE: Displaying Quickbase data utilizing HTML & CSS

    Posted 29 days ago
    Edited by Mark Shnier (YQC) 29 days ago
    I don't know  anything about code pages, but I see no reason that you could not put multiple fields in any one Rich Text formula.

    ------------------------------
    Mark Shnier (YQC)
    Quick Base Solution Provider
    Your Quick Base Coach
    http://QuickBaseCoach.com
    mark.shnier@gmail.com
    ------------------------------



  • 8.  RE: Displaying Quickbase data utilizing HTML & CSS

    Posted 29 days ago
    Edited by Adam Keever 29 days ago
    That is what I did here; many rich text formula fields combined together in an HTML table in a rich text formula field. All of the totals are auto calculated based on postures selected and count of postures for the cycle for the various body parts and the icons change based on the score:


    ------------------------------
    Adam Keever
    ------------------------------



  • 9.  RE: Displaying Quickbase data utilizing HTML & CSS

    Posted 29 days ago
    Here is a link to the post that shows the evolution of this solution from start to finish:
    link

    Final code used is at the bottom of the post.

    ------------------------------
    Adam Keever
    ------------------------------



  • 10.  RE: Displaying Quickbase data utilizing HTML & CSS

    Posted 28 days ago
    John,
    I had a situation that wasn't exactly your use case but may be helpful.  We were manually exporting data to Excel in order to have more control to get a better formatted printout onto paper. I wanted the users to be able to print out data with more controlled formatting much more directly from the QB app.  So I used an XSLT code page and the ability to set up a report to Format to "XML (Flat)" which then allows you to define the XSLT file to use to render the report.  The user then used the browser's print dialog to send to the printer.

    The steps are (steps 1 and 2 are a bit chicken and egg):
    1. Create a report that returns the data you want to use
    2. Set up your XSLT as a code page.  (I used an internal style sheet rather than a CSS file) This can access the data in the report by iterating over the XML data.
    3. Go back to the report settings and set it up so the Options --> Format is "XML (flat)" and reference your XSLT code page.
    When the report is run in QB, it then renders as XML and applies the XSLT to transform the XML file to the browser.

    Some things to be aware of:
    • The report rendered in the current browser tab. The only way for the user to get back to QB was to use the browser back button.  There might be ways to address this but it was fine in my case and since I didn't have a lot of experience with XSLT I didn't pursue it.
    • Once the report is set up to render via XSLT there isn't the normal access to "Customize this Report".  You need to go to the Table settings and edit the report from there to change anything.
    • There is an "XML (structured)" format but it had more info than I needed for what I was doing.  If you set the report format but don't put anything in the "Associated XSL document" field and then run the report, it will spit the resulting XML to the browser. This will allow you to see the XML structure and node names that QB uses, etc.

    Here is an example of one of my XSLT code pages (saved as an App Page with .xsl extension)
    It renders a list of classes for a "camp" with instructor names and class locations in a table.
    Note: I am new to using XSLT so there may be better ways of coding this than I did.
    <?xml version="1.0" encoding="UTF-8"?>
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    
    <!-- printout_class_locations.xsl
         Stylesheet for camp Class Locations output for printer. 
         QB report provides XML output (this XSLT designed to use QB report's flat XML output).  
         Note that:
           - QB Wraps the entire XML into a <document> node.
           - Then it has 3 introductory nodes:
             - <dbinfo>  - Table name and description
             - <variables>
             - <chdbids>
           - Then each row in the QB report is in a <record> node with the various columns as child nodes
           
         The flat XML output is then is translated via this XLST into HTML, rendered to the browser 
         and then intended to be printed from there
    -->
    
    <xsl:template match="/">  <!-- what part of XML to look at and process? Process the whole thing -->
    
      <html>
      <head>
        <style type="text/css">   <!-- internal CSS style sheet -->
          h1 {
            font-family: Tahoma, Arial, sans-serif;
            font-size: 36pt;
            color: #CF5300; <!-- orange -->
            text-align: center;
          }
          h2 {
            font-family: Tahoma, Arial, sans-serif;
            font-size: 24pt;
            color: #1368AA; <!-- blue -->
            text-align: center;
          }
          table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
          }
          table {
            table-layout: auto;
            align: center;
            padding: 1px;
          }
          th, td {
            font-family: Tahoma, Arial, sans-serif;
            padding-left: 3px;
            padding-right: 3px;
          }
          th {
            text-align: center;
            font-size: 18pt;
            font-weight: bold;
            color: #904034; <!-- dark red -->
            padding-top: 2px;
            padding-bottom: 2px;
          }
          td.classname {
            font-size: 12pt;
            color: #1368AA; <!-- blue -->
            text-align: left;
            font-weight: bold;
            padding-top: 4px;
            padding-bottom: 4px;
          }
          td.general{
            font-size: 12pt;
            text-align: left;
            padding-top: 4px;
            padding-bottom: 4px;
          }
        </style>  
      </head>
      
      <body>
        <!-- Determine camp name
             Just read it from the first 'record' node since it will be the same for all of them. -->
        <xsl:variable name="campName" select="/document/record[1]/camp___name" />
    
        <table width="100%">
          <thead>   <!-- Create page and column headers via HTML table header -->
            <tr><td colspan="3">
              <h1><xsl:text>Classroom Locations</xsl:text></h1>
              <h2><xsl:copy-of select="$campName" /></h2>
            </td></tr>
            <tr>
              <th width="40%">Class</th>
              <th width="27%">Instructor(s)</th>
              <th width="33%">Location</th>
            </tr>
          </thead>
          <tbody>
            <!-- process each row of the QB report (a <record> node) which is a class in the list -->
            <xsl:for-each select="/document/record">
              <tr>
                <td class="classname"><xsl:value-of select="name" /></td>
                <td class="general"><xsl:value-of select="instructors" /></td>
                <td class="general"><xsl:value-of select="class_location___name" /></td>
              </tr>
            </xsl:for-each>
          </tbody> 
        </table>
      </body>
      </html>
    
    </xsl:template>
    </xsl:stylesheet>



    ------------------------------
    Audrey Oppenlander
    ------------------------------



  • 11.  RE: Displaying Quickbase data utilizing HTML & CSS

    Posted 27 days ago
    Thank you Mark, Adam, and Audrey!  All of your feedback was extremely useful. I am going to try your suggestions. Really appreciate it. 


    ------------------------------
    John Sampath
    ------------------------------