Next, we'll take a look at the process definition page. When the user is on the process definitions page, they can click one of the rows and it will open up that particular process definition. On the left you see the properties of that process definition and read. Only. On the right you'll see the process diagram for that particular version. And at the bottom you see all of the process instances sorted in the descending time based on START also has the status of the instances and the completion times if appropriate. Refresh button up at the top to get the latest of the process instances. So let's take a look at the design of that component. So in user interfaces, you can see that there's a process definition page that is indented under process definitions and it has a property. Like many of the others, we include some specific fields and also include the process instances and those process instances are sorted, descending by their start time. The design over here looks very similar to the others a loading container with a path breadcrumb and a refresh button. And then we have a row with the fields component. This one has a special override.
Normally the fields would try to fill this space, and I think in this case it probably would end up with field here, field here, sort of two and two. What we did was override that with the winds component set to 100. Normally you'll see this, something like this, 100, 150, 25, 20, something like that. Full width, an extra small full width on small, half width on medium, quarter width on large and one fifth of the screen on extra large. In this particular case, simply by putting in 100, we forced the fields to stack on top of each other. The other interesting one here is that you can see from the Camunda library we've included the process diagram and process definition diagram, and all we have to do is pass it the process definition, and it will automatically retrieve the XML from Camunda and then use the BPM in library to the BPM and viewer from BPM and audio to view the diagram here. Continuing down the page, the last component on here are the two as the process instance table. So again, the array taking in the process instances and we've chosen that we just want to see start time ID state and end time and we will let the the labels be created automatically. And when we've added label here for process instance that's automatically added in this heading to here so that we see what the content of the table is. So that is the design of the process definition page. Next up, we'll take a look at the Process Instance page design.