Using modals to capture decisions and user input
1. Using modals to capture decisions and user input
2. DEMO script
Welcome back. In this video, we'll learn techniques for enhancing our apps to manage decision-making workflows. Oakmark is happy so far with the work we've done in building our apps, but they 'd like a few improvements. In our loan review app they aren't satisfied with the simple option of typing in ‘approved’ or ‘rejected’ into the review column. Instead, they’d like the loan officers to click on an application and interact with a popup window where they choose to approve or reject, and leave comments on their decision. Sigma's modal elements are the solution. They appear like pop-up windows overlaid on the current workbook page, opening when an open modal action is triggered. Modals may contain any number of elements, much like a workbook page. They can help users progress through complex decision-making workflows by providing a focused view of specific content. Sigma developers can use modals to help end users view contextual information on a data point or provide space for data entry, all without taking up space on an existing workbook page. Let's configure a basic modal for the loan approval app. Modals are created either via the layout menu in the Add element bar or by clicking the caret next to the Add Page button. A new tab or page is added to our workbook called Modal 1; we’ll rename it to ‘Loan Review modal’. Modals in Sigma will appear like separate hidden pages of a workbook when first created; end users of our app won’t see the modal in the page tabs at the bottom of the workbook. The modal initially looks like an empty page with two buttons labeled ‘primary’ and ‘secondary’. Let's keep things simple and imagine that this modal should just have two buttons, one labeled ‘Approve’ and the other ‘Reject’. We could use the pre-existing buttons, but let's turn them off and learn to add our own. From the Add element bar under the UI section we’ll add two buttons. Under each button's Properties panel we’ll change the button labels and colors. We’ll change the position of the buttons and give the modal a title. Populating a modal with controls and buttons Next, let's add the text box where the loan officers will type comments when approving or rejecting the loan. We'll use a Sigma control called a text area input. This is a text box large enough to accommodate several lines of text. After the text area box is added, we'll change the label to ‘Comment’ and resize everything to fit nicely. This demonstrates how you might configure a modal for capturing a simple user interaction. In the next videos, we'll cover how to trigger the modal to appear to the user and how to tie other subsequent actions to it. Before that, try another hands-on exercise. You’ll pick up where you left off with your loan officer promotion app, and practice adding a modal to it.3. Let's practice!
Create Your Free Account
or
By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.