Skip to main content
Question

Displaying Quickbase data utilizing HTML & CSS

  • June 13, 2020
  • 0 replies
  • 386 views
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
------------------------------
This topic has been closed for replies.

  • PaulPeterson1
  • Quickbase Alumni
  • June 13, 2020
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
------------------------------
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
------------------------------
Audrey O
Terms & ConditionsAccessibility statement