Adding UI & Layout elements for organization
1. Adding UI & Layout elements for organization
2. DEMO video
Welcome back. In this final chapter of our course on AI Apps in Sigma, we’ll add final aesthetic touches to our apps and put them to the test. Our app for loan approvals is almost ready to share with Oakmark executives. Let’s see how Sigma UI and layout elements can transform it into a polished, user-ready app. We’ve already learned about some of the elements in the UI and Layout sections of Sigma’s Add Element bar; let’s cover a few more that will help our app be as intuitive as possible. One of the first things our app needs is a clear header at the top of the page. We’ll select a Text element and place it across the top of the page. We’ll highlight to format the text as ‘Large Heading’ with bold font. Even more formatting can be found in the right-hand panel; we could add padding and ensure center alignment to make sure the header is clear and visible. Dividers are simple elements for splitting up pages into logical sections. Let’s place one under our new header, to further separate it from the data-focused elements below. Dividers can be horizontal or vertical, and you can customize their alignment, line style and width. Let’s imagine we also have a set of KPIs built for this app that will display and update based on page filter choices. It's crowded with these charts and our data tables on the screen. We can select multiple elements to add them to a Sigma container by holding down Shift on a Windows PC or Command on a Mac and clicking each element. Options appear in the upper right corner, including this icon for adding the elements to a container. Containers are like boxes to hold multiple elements. They are not collapsible, but help visually cluster related elements together. Since we have so many elements to display, let’s use a tabbed container instead. Using the three dots on the existing container, choosing ‘remove container’ will leave the elements but remove the container. Tabbed containers are added from the Layout menu. Once on the page, we can configure multiple tabs. Two works well for us, so we’ll rename the tabs ‘KPIs’ and ‘Applications’ First we’ll drag the relevant elements into each tab, then we can move back and forth between the tabs as needed. The tabbed container’s Format menu has some helpful options under ‘Tab Style’ to achieve the look you think best. Keep in mind that each individual element can be customized with a background color and outline if desired. Admins in a Sigma organization can configure custom workbook themes that align to your organization’s color scheme. If you or an admin has done so, you won’t need to spend extra time customizing repetitive details like background colors and outlines. Existing themes can be accessed by clicking on a blank space in your app and viewing the Settings pane. This loan approvals app looks ready for use. Let’s test out the app as if we were an end-user to make sure everything is working correctly. A final click of the ‘Publish’ button ensures all changes are visible, and changing to ‘go to published version’, we can now have the same experience as an end user. Let’s test it out. I’ll filter to personal loan applications below $50K and make some decisions. I’ll approve this application with a long term and high credit score, and I’ll reject one with lower credit and a very short term request.3. Let's practice!
In these final exercises, add some UI and Layout elements to your loan officer promotion app, then use the app as an end user would, choosing some loan officers to promote based on performance.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.