This post has been republished via RSS; it originally appeared at: New blog articles in Microsoft Tech Community.
I want to take a moment to show off a Blazor component that I made that can display an object recursively in a tree view. The component was made as part of my team’s project, FHIR Watch, a tool for comparing FHIR data from two different data sources: FHIR API Service and Dataverse. As such, it is particularly useful for displaying FHIR data.
- A Blazor project
- An object with interesting data and multiple levels for demonstration
If you’re doing data comparison like we were or need to view data your app is receiving in a simple format, a tree view is a great way for users to understand complex objects quickly. This tree view is made to be as generic as possible and so can work with a variety of flavors of data.
Our Code Behind
For our component to work, we needed to take in an incoming object and convert into an object that our component can understand. To do this, we created a new class which we'll call Branch. Our component will then take as a property a single root Branch called Trunk. Each Branch can own its own Branches.
Because we want to handle complex objects with depth to them, we need our class to not just preserve the value which we will need to display of properties but also keep track of the depth of our recursion and within a layer of the recursion – the iteration if there is more than one property at that layer. In addition, we can add a Boolean to control whether or not the user has expanded a particular node in the tree. Also, because I like to distinguish between properties and arrays, I added a Boolean to tell, if a node that has children, is it an object or an array so we can characterize them in our display.
Now that we have our properties, we need to add a constructor that can ingest a JToken. JTokens are the base class for working with JSON objects in Newtonsoft.JSON, a popular library for working with JSON in dotnet. In our constructor, we will recurse through our JToken and create new branches for each property at every layer of the object and order them by layer and ID (viz. the iteration in that layer). When looking at a JToken, we need to decide if it is showing an object, array, or primitive. If it is primitive, we can simply convert the value into something we can display.
If it is an object or an array, our recursion continues. In our FHIR Watch project, this constructor is for our Dataverse data which contains FHIR-adjacent data. However, our data from the Azure FHIR service is actual FHIR data and as such we were able to use the library, Firely, to work with that data. When I wrote this component though, I wanted it to work for more than just FHIR data so for the non-JToken constructor, I had it just consume an object.
For this constructor, checking for primitive (primitive-like data where it is simple to translate it to a human readable string e.g., a datetime) becomes a bit trickier. One handy method for accomplishing this was to check if the object had overwritten the ToString method - indicating that there was a strong opinion from the author of that type on how it should be displayed. This tricky allowed me to display FHIR Dates which are a different class than your standard datetime. To improve readability, I moved many of these conditionals into private helpers:
Our Blazor HTML
Now that we have a collection of branches, we can now display a tree. Our HTML will be pretty simple, we will take our trunk – the base branch – and display all of its branches.
For each branch that has branches of its own, we will call our Treeview component to display its branches, taking full advantage of Blazor’s ability to handle recursive component tags.
Our Scoped CSS
This was a great exercise in recursion and a useful component to keep in your back pocket. My two big takeaways from writing this component were:
- Recursive tagging Blazor is both possible and cool
- Keeping track of recursive depth is a must
I hope you enjoyed this write up. If you like the content I put out or want to be part of a community of healthcare developers sharing knowledge and resources, check out our HLS Developer discord at https://aka.ms/HLS-Discord. We have links to all our content there and a bunch of channels to communicate with us and likeminded tech and healthcare people. Hope to see you there.