Next, we'll take a look at submitting a request. On the last page, there is a floating action button that initiates a request vacation process. When we click that a new process instance is created and the user is redirected into the task, for that, they pick the start date. It only lets them pick the current date or later how many days they're going to be gone and why they're going. Then they click submit. So let's take a look at the design of that user interface. We come back here, we can either go through the process to click and launch the UI for that particular activity, or on the left NAV, we can use user interfaces and pick the submit request. So let's take a look at the design of this page.
First of all, on the top left, there is a property called Request Vacation. That is the business object for this process. This one is set to read automatically and we put specific fields in as required. They have to enter start date days and description. And when they make these changes, all of those changes will be automatically saved into the application database. This property is connected to the main component of this page called a task page. This is from the library. This gives you sort of a starter where you can put content inside of that and it will automatically take care of things like claiming the task, put task buttons on the bottom for save for later or submit, and all you have to do is pass in the object request vacation.
Now, there's another little twist here. When they click the submit button, we want to set the status to submit. And so the before submit function can be passed in optionally. And that is this function. And we have our first little snippet of code as in low code where we're going to set that mark submitted function. We just set mark submitted equal to a little function that does this dot request vacation dot status is submitted. We don't need to do any saves or anything else because the property request vacation is set to save automatically. Setter getters and setters are involved in this and it will automatically call the API to save that before the task is completed. Inside of the task page is the actual content of the page. The breadcrumb up at the top, includes the show process, diagram capability as well as where these task buttons are coming from this task page component.
What's inside of it is, first of all, a wrap and then a field. So what is a wrap? A wrap is a component that helps with responsive design. So when a screen with is small, this will be each of the fields inside of it will be 100%. When it's are extra small, when it's small 100% when it's medium or larger, they'll split the the horizontal width. This task has one row where two of these are in. If we move this and shrink it, oops. If we actually shrink it instead of just moving it, it switches from two fields across to a full width. So that's angular flex in action. So we have inside of that wrap a date field where the control is the start date form control. It's set for no padding. That's what we do when we put it inside of a wrap. There's not too much extra space on the bottom. This is the key where we set the minimum for the state field. It's evaluated from today. It has a default that creates a new date and sets gets the ISO string from that, basically because date without time is a string under the covers and that that will set the minimum for the date field for the number of days. All we have to do is put in the days form control because field as a component automatically knows what type this control is and uses the proper number field as part of that. And so that's why we see the increment and decrement that are here. And then finally we have the field for the description at the bottom. And again, description in our design is actually a multi-line string. If we go take a look at this business object, the description here is not just a string, it's a multi-line string. And the result of that is we get a text area automatically that we can fill in lots of data. Notice also that the submit button is automatically disabled because we said all three of these fields are required. So as soon as I pick the date, then the submit button is enabled. That's angular forms, validity checking in action.