This video shows the features of the Task List page and how it is implemented in Apex Designer. Here is the transcript:
Next, let's take a look at the design of the Task List page. You can see this page has a Breadcrumb up at the top with a table of tasks. The tasks are sorted descending by when that task started. There's a Refresh Button over here that they use to retrieve and update the list. There's also a button here that is used to initiate a process. We'll show that in the next clip. Let's take a look at the design of that particular page. In the project, if you go to user interfaces and on the left Task List page, you'll see that the task list has on the top left a property called Camunda Tasks, and that is a form array. And you can open up with this little launch icon button to see the details of that object. The read configuration is set to automatically. What that means is when the page loads, the page will automatically make the API call to retrieve the tasks. And when we retrieve those tasks, we've set the read configuration such that it's ordered with start time descending and we limit it to 50 items. So the 50 most recent tasks. And down below, we're also including the process instance so that we have the information about the task as well. In the middle part is the template. These are the user interface elements that are generated into the Angular HTML. Up at the top is a Breadcrumb and inside of the breadcrumb is a refresh button. That comes from the Dynamic Components library and the only input to it is the array. So it's asking what array should we refresh when we click that button? So it's set to is evaluated from meaning that this is an expression in this case just the name of the property that gives the array for that refresh button. And when the user clicks the refresh button, it will automatically call the read method on this Camunda tasks array. Below that is something called a Loading Container. This is a container that shows a progress bar while the tasks are reading, and after the reading is complete, it will show whatever is inside it. In this case, it's the task table. So the loading input is a boolean that is evaluated from this special property reading. So while the API call is being made to read those tasks, this reading property is set to true and that causes the progress bar to be shown. Inside the loading container is a table and that table from the Dynamic Components Library takes in an array, which is the tasks, and you can optionally specify these additional properties. In this case, we've used pathsCsv to call out specific items that we want to include. It's not just properties of the task itself that we're showing in this table, such as start time, for example. But also properties that are nested deeply inside of it. So task dot process instance, dot request vacation, dot submitter dot email. So that is how the task shows this email right here of who requested it. Each of these items we could just specify the pathsCsv but we need some aliases, for example, for name we don't want just name because that's a little confusing. Is it the name of the person, the reviewer, the submitter or what? So we use task, for example. So this is just a comma separated list of labels that will be used as the headings for the tasks on this page. And finally, route prefix. This is what tells this table where to send the user when they click on a link. So if we hover one of these, you'll see down at the bottom it's showing tasks slash followed by the task ID. Below the table then the last thing on the page is the start process button. This one is interesting because you basically pass in the process name, request vacation, and you can optionally, if needed, pass in defaults. And this particular one is interesting because it shows a couple of technical capabilities for filling in details. So in our in our data model, a request has a submitter. And so the id that identifies that submitter is submitterId and we want to have that set to the id of the person who is currently here. You notice that we've added authService as a dependency, that off service has a method on it called appUser. The appUser is fetched asynchronously. When you're working with asynchronous values in Angular expressions, you use the pipe and then the async pipe. And what that does is subscribe to that observable and take the latest value, pass it out. The question mark is called the Elvis operator. One of my favorite phrases in development. It means simply that if there is no appUser, don't freak out. Don't try to get the idea of something that is null. In this case, it says when that id is finally available, then go ahead and assign it as a default. So that is the design of the task list and we'll continue on with the rest of the video series to highlight the design of other components of this app.