Added new SubDocIframe handler to show embedded HTML

src/components/views/SubDocIframe.js

+const $ = require("jquery");
+const isIterable = require('../isIterable');
+
+const SubDocIframe = function (data) {
+  const div = $('<div class="row">');
+  const headerDiv = $('<div class="col-sm-2">').html(data.fieldName);
+  div.append(headerDiv);
+
+  try {
+    const value = JSON.parse(data.value)
+    const url = data.cf.baseUrl + '/' + data.id + '/' + value['@id'];
+    const width  = data.cf.width || '800';
+    const height = data.cf.height || '800';
+
+    div.append($('<iframe>', { width: width, height: height, src: url }));
+
+    console.log(`Iframe : ${JSON.stringify(data)}`);
+    return div;
+  } catch(e) {
+    div.append($('<span>').html(`Error building iframe ${e}`));
+    return div;
+  }
+}
+
+module.exports = SubDocIframe;
\ No newline at end of file

src/components/views/ViewDoc.js

@@ -24,16 +24,20 @@ const ViewDoc = function (data) {
       }
       related.append(relatedUl);
     }
+
     const linkTo = $('<div>');
-    if (isIterable(doc['uri_id'])) {
-      for (let resolve of doc['uri_id']) {
-        const goTo = $('<a>');
-        goTo.attr('href', `${data.config.repo}${resolve}/`);
-        goTo.attr('title', 'Open Record');
-        goTo.attr('target', 'blank');
-        goTo.text('Open Record');
-        goTo.addClass("link");
-        linkTo.append(goTo);
+    console.log(`viewDoc: ${JSON.stringify(data.config)}`);
+    if( data.config.repo ) {
+      if (isIterable(doc['uri_id'])) {
+        for (let resolve of doc['uri_id']) {
+          const goTo = $('<a>');
+          goTo.attr('href', `${data.config.repo}${resolve}/`);
+          goTo.attr('title', 'Open Record');
+          goTo.attr('target', 'blank');
+          goTo.text('Open Record');
+          goTo.addClass("link");
+          linkTo.append(goTo);
+        }
       }
     }
     let tableFields = data.main.viewFields || [];

src/components/views/ViewTable.js

@@ -2,6 +2,7 @@ const $ = require("jquery");
 const ViewSubDoc = require('./ViewSubDoc');
 const SubDocHorizontal = require('./SubDocHorizontal');
 const SubDocDate = require('./SubDocDate');
+const SubDocIframe = require('./SubDocIframe');
 const SubDoc = require('./SubDoc');
 
 const ViewTable = function (doc, fields) {
@@ -9,33 +10,46 @@ const ViewTable = function (doc, fields) {
   const dummy = $('<div>');
   const div = $('<div class="table table-responsive">');
 
-  for (let key of fields) {
+  for (let sdcf of fields) {
     const list = $('<div class="table">');
     let subDoc;
-    switch (key.display) {
+    switch (sdcf.display) {
       case 'SubDocHorizontal':
-        if(doc[key.field]) {
-          subDoc = SubDocHorizontal({key: key.field, value: doc[key.field], fieldName: key.fieldName});
+        if(doc[sdcf.field]) {
+          subDoc = SubDocHorizontal({key: sdcf.field, value: doc[sdcf.field], fieldName: sdcf.fieldName});
           list.append(subDoc);
         }
         break;
       case 'SubDocDate':
-        if(doc[key.field]) {
-          subDoc = SubDocDate({key: key.field, value: doc[key.field], fieldName: key.fieldName});
+        if(doc[sdcf.field]) {
+          subDoc = SubDocDate({key: sdcf.field, value: doc[sdcf.field], fieldName: sdcf.fieldName});
+          list.append(subDoc);
+        }
+        break;
+      case 'SubDocIframe':
+        // passing the config and the document id to the component so it can build the URL
+        if(doc[sdcf.field]) {
+          subDoc = SubDocIframe(
+            { key: sdcf.field,
+              value: doc[sdcf.field],
+              fieldName: sdcf.fieldName,
+              id: doc['id'],
+              cf: sdcf
+            });
           list.append(subDoc);
         }
         break;
       case 'SubDoc':
-        if(doc[key.field]) {
-          subDoc = SubDoc({key: key.field, value: doc[key.field], fieldName: key.fieldName, template: key.template});
+        if(doc[sdcf.field]) {
+          subDoc = SubDoc({key: sdcf.field, value: doc[sdcf.field], fieldName: sdcf.fieldName, template: sdcf.template});
           list.append(subDoc);
         }
         break;
       default:
-        if(doc[key.field]) {
+        if(doc[sdcf.field]) {
           const row = $('<div class="row">');
-          const defaultKey = $('<div class="col-sm-2">').html(`${key.fieldName}`);
-          const defaultValue = $('<div class="col-sm-6">').html(doc[key.field]);
+          const defaultKey = $('<div class="col-sm-2">').html(`${sdcf.fieldName}`);
+          const defaultValue = $('<div class="col-sm-6">').html(doc[sdcf.field]);
           row.append(defaultKey).append(defaultValue);
           list.append(row);
         }

src/index.js

@@ -38,9 +38,18 @@ let state = {
     searchText: '',
     related: [],
     viewFields: [
-      {display: "SubDocHorizontal", field: "author", fieldName: 'Author/s'},
-      {display: "SubDoc", field: "html", fieldName: "Grant", template: "item['@id']" }
-    ]
+      {
+        display: "SubDoc", field: "author", fieldName: 'Author', template: "${item.value[0]}"
+      },
+      {
+        display: "SubDocIframe",
+        field: "html",
+        fieldName: "Application",
+        width: "1000",
+        height: "400",
+        baseUrl: "http://localhost:8080/grants"
+      }
+      ]
   },
 
   facets: [