Differences

This shows you the differences between two versions of the page.

--- en:user:gs3_sample_format_statements [2016/10/09 21:01] – [Linking metadata to a search] kjdon
+++ en:user:gs3_sample_format_statements [2016/10/09 23:08] – [Using the javascript in the format statement] kjdon
@@ Line 203: / Line 203: @@
   * s1.index=CR   - the index to search in, in this case the CR dc.Creator index.
+===== Using javascript to change the display =====
+As an example of using javascript, we will see how to output the document filesize in a human readable form. For example, instead of displaying "834716 bytes", it will display "815 KB".
+A basic javascript method to do this is the following:
+<code>
+function humanReadableFileSize(bytes)
+{
+    var filesize = bytes + " bytes";
+    if (bytes > 1048576) {
+	filesize = Math.round(bytes / 1048576.0) + " MB";
+    }
+    else if (bytes > 1024) {
+	filesize = Math.round(bytes/1024.0)+ " KB";
+    }
+    return filesize;
+}
+</code>
+So, we have a javascript function, but how do we get it into the page? And how do we call it?
+==== Adding javascript into a page ====
+==== Using the javascript in the format statement ====
+Now that we have the function included in the page, we can use it to modify our filesize display.
+Lets modify a classifier format statement to use this function. The following is a simple format statement that displays an icon linking to the document, the title, and the filesize.
+<code>
+<gsf:template match="documentNode">
+  <td valign="top">
+    <gsf:link type="document">
+      <gsf:icon type="document"/>
+    </gsf:link>
+  </td>
+  <td valign="top">
+    <gsf:metadata name="dc.Title"/>
+  </td>
+  <td>
+    <gsf:metadata name="FileSize"/>
+  </td>
+</gsf:template>
+</code>
+We will modify the third <td> element to display a human readable form.
+During development, we can use the simple **document.write()** method to output the result:
+<code>
+<td>
+<script type="text/javascript">document.write(humanReadableFileSize(<gsf:metadata name="FileSize"/>));
+</script>
+</td>
+</code>
+This lets us check that our function is correct and we are getting the right metadata. However, using "document.write" is not considered good practice.
+Instead, we will need to set the innerHTML of the td element. This means we need to give the td element an id so we can find it again.
+<code>
+<td>
+  <xsl:attribute name="id"><gsf:OID/>-fs</xsl:attribute>
+  <script type="text/javascript">
+    document.getElementById(<gsf:html>"</gsf:html><gsf:OID/>-fs<gsf:html>"</gsf:html>).innerHTML= humanReadableFileSize(<gsf:metadata name="FileSize"/>);
+  </script>
+</td>
+</code>
+Element ids need to be unique, so in this case we will use the document id (**<gsf:OID/>**) with **-fs** just in case the OID has been used as an id elsewhere in the page. Because we are not assigning a simple string to the id attribute, we need to use the **<xsl:attribute>** element. We cannot write
+**<td id="<gsf:OID/>">**.
+To set an element's text, we use **document.getElementById("id").innerHTML = "xxx"**.
+**document.getElementById** finds the specified element, and **element.innerHTML = "xxx"** sets its text.
+We set the text to be the result of calling our function on the filesize metadata.
+One further tricky part. We want to write **document.getElementById("<gsf:OID/>-fs")**. However, the XSL transform process will escape the double quotes with &quot; and then the javascript will be invalid. To get around this, we use **<xsl:text disable-output-escaping="yes">"</xsl:text>**.
+i.e. **document.getElementById(<xsl:text disable-output-escaping="yes">"</xsl:text><gsf:OID/>-fs<xsl:text disable-output-escaping="yes">"</xsl:text>)
+**
+Greenstone provides a shorthand: **<gsf:html>"</gsf:html>**, which gets resolved to <xsl:text> with the disable-output-escaping attribute set.