May 27, 2022
Letting your non development colleagues update text on your site with a simple JSON file
May 27, 2022
Letting your non development colleagues update text on your site with a simple JSON file
Newbie 29 posts
Followers: 6 people

I previously talked about how I leveraged using variables in queries to help with a site I was recently tasked to build.  As a quick refresher each page on this site would look the same with a right sidebar with some definitions and descriptions, then a chart of data on the left, with a data table underneath to show the data in tabular form.  In that previous post I was concerned with the survey data in the app and how to pull it out for display easily.  This time I am worried about how to handle all of that text in the right sidebar.  This sidebar would have a description of the data being presented, definitions for the data elements, and any other pertinent information my group wanted to display.

So the obvious answer, at least to me, is to create a simple CRUD (Create, Read, Update, Delete) app for users to enter that text and then pull it out as needed.  In this case though we were under a time crunch to get the site out so I was trying to think of what would be the easiest and quickest idea to implement.  Also, what would be relatively easy for the staff member responsible to update.  These would not be developers.   Finally, what would give me the flexibility to come back later, if I were given the time, to swap in a better and more elegant solution down the road.  I had just been knee deep in some API work that was giving me a JSON file back and I thought that is about as simple as you get.  I could work with it easily, it looks close enough to a text file for the staff member who’d handle the text, and I could swap in a service down the road to change the JSON source when I could circle back.  Seems easy enough.

The first step was I just needed a sample JSON file to show people so they could just copy and paste it till their heart’s content.

        “Header 1”: “<p>Put any text you want under this header/section here</p>
        <p>If you want multiple paragraphs just put them inside these p tags like this</p>”,
        “Header 2”: “<p>This is the text for the second header.  Repeat this as much as necessary</p>”
So I have a template that seems intuitive to me at least.  I showed it around and people agreed.  It’s important to have buy in or it’s never going to work.  The next step is I just mapped a drive to the folder for anyone who needed to update that sidebar.  I knew going in it was just a few people so would not turn into the wild west with people overwriting each other.  The only rules I gave were follow the example, name the file with no spaces in it, end the files in .json, and tell me the name so on my end I could register the file in the database with the data being displayed so I could programmatically include it.
In the CFM page I have the following code.  I am using tag syntax as I have settled on using tag syntax in the .cfm pages and script syntax in .cfc per what seems the best modern practices.
<!— Do we have a JSON sidebar file to work from? —>
<cfif fileExists(‘#ExpandPath( “./” )#assetssidebarJSON#metrics.sidebarJSONFile#’)>
     <!— Pull in the contents —>
     <cfset sidebarJSON = fileRead( ‘#ExpandPath( “./” )#assetssidebarJSON#rc.metrics.sidebarJSONFile#’ ) />
      <!— if this is valid JSON then let’s use it.  —>
      <cfif isJSON( sidebarJSON )>
            <cfset sidebarStruct = deserializeJSON( sidebarJSON ) />
            <!— Display the sidebar contents —>
            <cfloop collection=”#sidebarStruct#” item=”sidebarEntry”>
                  <span class=”list-group-item list-group-item-action flex-column align-items-start”>
                       <p class=”mb-1″>#sidebarStruct[ sidebarEntry ]#</p>
Hopefully that seems pretty straightforward.  I comment incessantly as I always seem to forget what I was doing when looking back at code.  Its almost to the point of being OCD and probably annoying and too much but helps me.  So I do a check to see if the file is there, then I do a check to see if it is valid JSON because I shouldn’t trust they didn’t mess up the template, and finally I just loop the structure made from the deserialized JSON.
This gets me up and running and was really quick to implement.  If I get the time to make that CRUD app to control this text I can just swap out that if statement where I check if the file exists with a function call that returns JSON and everything should just work.  That’s the goal anyway.
So if you have a similar situation for some reason maybe JSON can give you a quick fix to get things moving.
Add Comment