Crafting intuitive, consumer-grade mobile experiences is an essential element to any organization’s digital success today. However, Forrester reports that mobile developers are in short supply in The Forrester Wave™: Mobile Low-Code Platforms For Business Developers, Q3 2018.
Not only do companies need people creating their mobile experiences who can understand and implement the value of product and user experience (UX) design, they also need people with advanced mobile experience coding skills.
With Skuid, you can place all of your focus on good product and UX design for the mobile experience, because actually developing the application requires less time and resources. Explore this tutorial to learn how you can bring your mobile experience design to life faster.
[Tutorial] Build a contact app for mobile with Skuid.
Watch the video tutorial and follow along with the written guide below as I walk you through entire process, step by step. Here’s the end result application you’ll build by the end of this tutorial: https://demo.skuidsite.com/contactmobile.
In this tutorial, I’d like to introduce you to a few of my favorite Skuid components that we use extensively at Skuid to build beautiful and functional applications.
Regardless of the data sources you’re using, whether it’s Salesforce, MS Dynamics, or SQL databases, you can achieve a consumer-grade look and feel when building applications with Skuid, without writing a single line of code. So, roll up your sleeves and let’s get started!
Setup
1. Get Skuid
You’ll need access to Skuid to complete this tutorial. If you’re not a Skuid user yet, go to http://skuid.com/free-trial/ and grab a free 14-day trial to get started.
Once you install Skuid, click Explore in the Welcome page. You’ll find four sample pages where you can see Skuid in action without any extra effort. The app we’re building at the end of this tutorial will use the same sample Datasource you see in these pages.
2. Download the Starter Page
(here (right click and Save link as..)) (Skuid page with a Skuid Model preconfigured with extra data added). We will not cover Skuid Models, how Skuid accesses data, in this blog post.
To learn more about Skuid Models, hop over to Skuid Docs or join other Skuid learners at a free, half-day Build-an App workshop near you.
3. To create a Skuid page using the downloaded file
click compose → new page. Name this page MyContactApp. Check the Upload XML File option, select the Starter Page file to upload, then click the Create Page button.
4. Download the Finished Page
(here (right click and Save link as..)). Repeat the previous steps to create a new Skuid page with the Finished Page file, but name this one MyContactApp_forReference. Then, preview the page.*If you get stuck at any point during the tutorial, you can always refer back to this finished page to get unstuck!
Let’s build!
Build the Basic Main Content (with Deck and Rich Text).
1. Add a Deck component to your Starter page.
Decks are great for displaying data as cards.Deck is one of my favorite Skuid components to create applications with a modern, consumer-grade look-and-feel, and it is hands-down the most useful component when it comes to building mobile apps. From contact lists, to product catalogs, to survey questions, Deck is an extremely versatile component that can be transformed into anything you can imagine. Here’s how we’ll use it today: Configure your Deck properties as follows:
Settings in the Basics tab
Settings in the Card tab
Settings in the Card Styles tab
2. Add your first Responsive Grid component inside the Deck.
The Responsive Grid is another great Skuid component for displaying data side-by-side. The grid will stack vertically as screen sizes get smaller, perfect for creating a mobile user experience. For the app we’re building, we’ll use the Responsive Grid to display the Contact Image next to the Contact’s main info, like Name, Phone, Email, and Summary. In Layout tab, set Column Gutter Size to 24px. Go to Styles tab and add padding to 16px 24px.
In the first Division, add an Image component and select ContactImage for the Image URL field.
Set the Image width to be 96px.
In the same division, add a Wrapper component below the Image component, with a background color of #f02f63 and other styling settings like the screenshot below.
Add a Rich Text component inside this Wrapper, and set the Model of the Rich Text to be ContactList. You will see that an Insert Field option shows up when you click on the Rich Text. This way, you can easily add multiple fields from the ContactList model to the component.
Click Insert Field and add Priority to the Rich Text. Select the text (including the brackets) and set the font size to 10px, set the color to white, and align it to the middle.
Set this first Division in the Responsive Grid to be “Fit To Content” so it snaps to the width of the image.
Add another Division. In this one, use a Rich Text component to add the Contact’s Name, Phone, Email, and Summary fields. To emphasize the Contact’s Name, make this field bold and larger with a 20px font size.
3. Add your second Responsive Grid component to the Deck.
Make sure your grid has two divisions, just like the first one. Don’t forget, you can always refer to the Finished Page if you need help with the exact settings. In Layout tab, set Column Gutter Size to 40px. Go to Styles tab and add padding to 4px 24px.
In the first division, add a Rich Text component and set it to ContactList Model. Type in “Next Step”, then use the Insert Fields button to add the field NextStep to the Rich Text.Clone this Rich Text and move it over to the second division, edit the Rich Text to say “Status,” then add the Status field to the Rich Text.
4. Preview your page!
Designing with Skuid is incremental and progressive. At every step of the way, you can Save Changes and click Preview to see your progress. Of course, some changes might not be as obvious (adding a Model) when previewing as others (adding Field Editors to display data). Hopefully, by now, your page looks somewhat like the screenshot below.
Congratulations! You’ve done the hardest part, which is configuring layout and displaying data. You’re 90% there. The steps below are optional, and they will help you polish your page with some extra styling. But your Skuid page is now 100% functional! If you’d like to see more complex demos of applications built with Skuid, request a demo today.
[Optional] Use Wrappers to add more styling.
Add a divider to add visual separators.
To add a line divider, drag and drop a Wrapper component in the space between the two Responsive Grids. Add a border-bottom styling (width: 1px, color: #eee) to this Wrapper.
Create a round container for the Contact Image.
To make the contact image round with a blue border, drag and drop a new Wrapper component right above the Image component, then drag the Image component into the Wrapper. Style this Wrapper as shown below (border color: #289dff).
Create a new app.
- From Skuid’s navigation, click apps.
- Create a new app and add the newly created page for the default route.
Preview your app at domain.skuidsite.com/mobilecontactlist. Reduce your browser’s width to see the contact list respond to the different screen sizes. And that’s it, you’re done! You created a fully-functional, custom, consumer-grade mobile app without writing a line of code. How was your experience? How long did it take you? Let me know your thoughts here.
Ready to use Skuid to create the app you've always wanted for your organization? You can buy Skuid online today and keep testing the limits of your imagination. Click here
