JSON Viewer for Card Modals

Blog and Article Posts
1

In the app I’m currently developing I use card modals for displaying editable records which the user then saves to commit back to my FileMaker database and close the card modal.

One problem with this approach during development is that you lose access to the Dev Tools as this also opens in a card modal. Once solution has been to use the Data Model Inspector snippet which formats the model into JSON but can become a bit tricky to use if the model is large and/or the modal is small as there is then no ability to expand or collapse the JSON or search for a key or value.

{
  "html": "<pre class=\"h-64 overflow-scroll\">{{model}}</pre>",
  "label": "Data Model Inspector",
  "styleClasses": "col-md-12",
  "type": "html"
}

I recently came across the Code Editor snippet and cursed myself for not having found it earlier.

{
  "getAsJSON" : false,
  "label": "Schema",
  "height" : "300px",
  "lang": "json",
  "model": "source",
  "styleClasses": "col-md-9",
  "foldDepth": 3,
  "type": "aceeditor"
}

At first I thought this was the solution to my problem BUT unfortunately you have to provide a key from within the model rather than being able to view the entire model (or app) object.

Following a suggestion from Andrew at BetterForms that a JS library may be solution I did some Googleing and ran a search in CodePen and came up with a neat solution that only requires a couple of bits of code so thought I’d share it here incase anyone else has a similar use case.

Step 1 - Add JSON Editor CDNs to your DOM Header Insertions - Load first

<!--JSON Editor-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.9.5/jsoneditor.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.9.5/jsoneditor.min.css">

Make sure to add it to the Load first field as didn’t work for me when I added it to the Load later.

Step 2 - Add the following html snippet to your card modal schema

{
        "html": "<div id=\"jsoneditor\" style=\"width:100%; height:300px\"></div>",
        "styleClasses": "w-full",
        "type": "html",
        "visible": true
}

You can adjust the size of the editor by changing the values in the div’s style and hide the editor by setting the visible key to false.

Step 3 - Add the following JS to the card modal’s onFormLoad namedAction

// create the editor
var container = document.getElementById("jsoneditor");
var options = {};
var editor = new JSONEditor(container, options);

//Load in model
editor.set(model);

If you needed to view app instead of model you can just change the last line to editor.set(app) or only load a certain part of your model in a similar fashion.

3 Likes