This video shows the process instance page functionality and design. Here is the transcript:
Next we're going to cover the Process Instance page. Here is the Process Definition page that we looked at in the last clip. Down at the bottom, there's a list of process instances where they can click on those and it looks very similar in layout. We have the properties on the top left. We have the BPMN diagram on the top right with the refresh button. And in this case, in place of the process instances we have a list of tasks on that process instance.
So let's take a look at the design. So this one will be very similar to the last one. It's indented under there. We've got process instances. Now in this case we include the fields that we want to show.
We include the processDefinition which is the parent of this element, as well as including the tasks and sorting those by start time descending. In addition to the refresh button, we have suspend and resume buttons. Now you notice that we didn't see those up here. That is because this particular instance is completed. So you can see another little trick we use right here.
We've put an if on this to say we'll only show the suspend button when the process instance state is active. When they click it, we're going to trigger the suspend method which is over here. So if we take a look at that, it's a very simple method. It's an async method that means that you can use await here. And so it's simply doing await this.camundaProcessInstance.suspend. All of the rest API calls and the other stuff that needs to be done is handled automatically for you by the Camunda library. After it's suspended, then we read it back to make sure that we have all of the appropriate data from that.
The resume button is very similar. Fields, process instance diagram and the task table are just like process instance. So I won't spend time on those. But if we go back here and look at an active process instance, you can see now we've got a pause button or a suspend button with the pause icon and we can suspend that and it will re-read. Now the state is suspended and we can resume that one. And now the state is active.
That is the design and operation of the Process Instance page.