top of page
  • Writer's pictureStephan Zimmer

Building a schemaless all-purpose Document Viewer with Retool

Our client had all of its data stored in various schemas in a MongoDB database. In order to provide easy access for support agents, the client needed an application where the user could look up any document of any collection. The challenge: inherently schemaless, the client wanted to have a viewer for all collections, no matter the schema or the type. The desired functionality was close to what was provided by MongoDB Compass but without the user having either privileged access or a chance to edit the content of a document.

One of the limitations to the MongoDB integration in Retool concerns listing collections. At the point of writing this post, collections had to be called individually in each query.

To provide the required functionality, we created an ad-hoc structure within a JSON editor object in Retool. Said implementation would have the benefit of supporting changes even in the future; if a new collection was to be added to a database, the client would simply add that collection to the schema in the Configuration part of the app.

The Configuration tab contains a JSON explorer / editor component which hosts the DB structure following this schema:

  "database1" : [ "coll1", "coll2", "coll3" ],
  "database2" : [ "coll4", "coll5", "coll6" ]

For each database we needed to create a query to findDocuments and to listDocuments - at the time of writing this post, the client had three databases meaning we needed 3x2 = 6 very similar queries to make use of the above technique.

Using the ternary operator in JS, we can then render the required data readily in a similar fashion.

Similarly to the doc_table implementation, we extract the content of each document inside a JSON explorer aptly called document_view:

The Payload content here is stored in the 'data' member of the document, so we unravel the content using lodash for the Payload JSON explorer component:

_.has(document_view.value['0'], 'data') ?  document_view.value['0'].data :  _.has(document_view.value['0'],'assets') ?  document_view.value['0'].assets :  document_view.value['0'].alerts 

The payload renderer then just takes the value of payload_view.

Building internal tools can sometimes be a real doozy. Are you interested in using Retool for your application toolstack but don't know where to start? Contact us and we'll make sure to have you up and running in no time.

19 views0 comments
Post: Blog2 Post
bottom of page