Unite UX Tutorial

Introduction

This article will walk you through Progress® Unite UX® bundled tools - the Progress Unite UX plugin for Sketch and the Progress Unite UX Studio.

In this guide, we will customize a document in Sketch using the Progress Unite UX plugin and export it to Progress Unite UX Studio where we will transform it into a functioning app. We will customize the app, so that it suites our needs and as a conclusion we will build and publish it.

Building Blocks

Prerequisites

Before you start you must install the following tools:

Customization in Sketch

In this tutorial we will use the Unite UX.sketch project to showcase the workflow of Unite UX. The file contains a sample Sketch design, that can help you get started with the plugin and later to cut it in responsive layout in the Unite UX Studio. It has two pages:

  • Component Instances - contains instances of the Kendo Component Library components.
  • Layout Templates - design for a sample app. It will be the focus of this tutorial.

At the bottom of this tutorial you will find an app in which the responsive layout has already been cut.

Customizing the Kendo Component Library Theme

The Kendo Component Library is a collection of components and their various states that you can add to your project, so that when it is exported in Unite UX Studio, you will receive the Kendo component along with its functionality. A designer can customize the look of the component to suit the general theme of the design in mind. Unite UX plugin allows the customization of the library for exactly this purpose. In the next few steps we will see how to do that.

To add a component to your project use the Insert menu in Sketch, locate the Kendo-Library and the component you would like to add and drag it onto the artboard. It is not recommended to copy and paste components directly from the Kendo-Library.sketch, because that would break their relation with the library and you won't be able to customize them.

  • Open the Unite UX plugin through the Plugins Menu.

Open Plugin

  • The Kendo Component Library appears.
  • Hovering above it will reveal the Settings button.
  • Select it to reveal the option to duplicate the library.
  • When prompted for a name, enter My-Customized-Library.

Duplicate Library

  • Select My-Customized-Library.
  • This will prompt a dialog box that asks you to link the component instances in your project to the My-Customized-Library. Confirm it.

Link Library

  • Now we can customize the theme of the library. Select the Pencil button to open the theme editor.

Edit Library

  • Let's change the accent color:

Edit Color

  • Be sure to close the color picker, so that the change can take place.

  • After you make the change, exit the editor and it will be reflected in the library. You will get a notification in the upper right corner in Sketch that prompts you to update the component instances in the project.

Update Library Notification

  • You will also get a preview of the changes that will take effect for the respective components.

Preview Library

  • Select Update Components to confirm and you will see the new look of the components.

Exporting the Project to Unite UX Studio

It is recommended to save the .sketch project before you export it, otherwise some artifacts may not be transferred to the exported app. One such case is when the app contains a native Sketch image.

  • From the Plugins menu open the Unite UX plugin options and select Export to UX Studio.

  • At this point you can select the artboards that you want to export. The Component Instances are not the focus of this tutorial, so select only the artboards from the Layout Templates group.

Select for Export

  • Now select the destination folder and name of the project that will be exported. The folder will contain a number of sub-folders that contain the exported artifacts, the app metadata and the .unite-ux file.

Working with the App in Unite UX Studio

Importing the App in Unite UX Studio

  • After logging in, select the Import button in the upper left corner and navigate to the folder where the .unite-ux file is located.

Export Selection

  • You can use either Angular or React as framework for the app. For this tutorial we use Angular.

Select Angular

Previewing the App in the Browser

  • Once the app is opened, you are taken to the app design page, where you see all artboards from the Sketch document as separate views.

  • At the top of the canvas you are presented with two options - DESIGN and RESPONSIVE.

  • DESIGN shows the absolutely positioned elements exported from Sketch.
  • RESPONSIVE shows the elements in responsive layout. At the moment RESPONSIVE is empty, since you haven't positioned any of the elements onto it. We will talk about how to do that in a bit. You can find more about the tools at your disposal in the Using the Toolbar Actions section
  • CODE shows the generated files for the selected view according to the platform you selected.

You will not be able to see the files in the CODE tab, before you generate the app for the first time.

  • Select the Dashboard view and select the Preview in browser button. This generates the Angular app and opens it through a development server.

Preview In Browser

Note that the grid element on the page has been loaded with actual data. Upon importing the app, it is linked with a sample data provider to help showcase the data-bindable components. More about data providers can be found in the Data Providers section

Setting Up the App Layout

  • In the Unite UX app we have a section that we do not expect to change from page to page - the navigation bar on the left side. By setting the Application Layout we set the borders of the content that will vary on every page.

  • First, click on the Plus button on the upper-left corner and select New App Layout

  • Name it App-Layout

  • Drag and drop the views under it.

  • To set the Application Layout content area, select a view, open the options menu for the newly created App-Layout and select Edit Content Area and then resize the area that will hold the content placeholder. In our app it should encompass everything to the right of the navigation bar.

Select Content Area

  • After you are done with the resizing, select the confirmation button next to the app layout name.

  • Switch to the Responsive tab.

  • On the left-hand side you see a number of fields. The current tutorial involves:

    • Responsive Layout - contains those that have already been setup for responsive design.

    • Detached Elements - contains all components from the absolute design.

App Layout Responsive

  • The Responsive canvas uses Container or row and col containers from the Bootstrap Grid system to achieve responsive design for the application. Each row can hold only cols and a col can hold multiple rows or a single component. You can read about them in the Responsive Containers section.

  • Rows, cols or container are added through the corresponding buttons in the Responsive Layout. It is important to select the parent container in which you would like to create a row, col or container. We will see a few example below.

  • When you drag and drop a component from Detached Components to the View element in the Responsive Layout to set it up for responsive design, row, col or container component will be created for it according to the rules stated above.

  • At the moment the Responsive Layout tree and correspondingly the canvas, contain a row with a col that holds the Content Placeholder.

  • Since we want to have a navigation bar on the left, drag the navigation bar component from Detached Components and drop it over the existing row. This will create a col for the navigation bar and place it to the immediate left of the parent container. If that is not the location you intend for it, drag and drop containers in the Responsive Layout tree change their location.

  • Now we have the components that we need, but the size of the navigation bar is not right - it is too wide.

  • Select the col holding the navigation bar. On the right side of the canvas you will notice the Property Inspector field. It contains the type of the component or container, its configurable properties and styles, which vary depending on the component and container.

  • One of the properties for the col is the Column Width. There are three options to set the column size:

    • A Bootstrap column—When the column type is Bootstrap, the columns can take 12 parts of its parent container.
    • A container with a fixed width — When the column type is set to Fixed, the column occupies the space of the screen that equals to its width.
    • A flex container—When the column type is set to Flex, the column occupies the entire empty space from the parent containers and its sibling column elements.
  • We want the Navigation bar to have fixed size, so choose that from the Column Type property and since we want the content to take up all the rest of the space but still be flexible, select the Flex type for its column.

Column Width

  • There is an element called background in the Detached Elements field. This is an element that helps us display the absolute design properly, but is not usable in the responsive layout. We will handle background for the elements in the next section.

Setting Up Responsive Layout

  • Now we can make the design responsive. From the app design page, select the arrow button for the Dashboard view.

Fields

  • Let's setup a few components from the Dashboard view. From the absolute design, we can conclude that there are two main sections of the page - the Navigation bar to the left and the main content on the right. We talked about the Navigation bar in the previous section, so let's focus on the content that strongly resembles two columns - the main content area and a sidebar on the right. It makes sense to setup two cols for them, so create a row and add two cols in it.

  • We should also set the size ratio between them. Select a col and look in the Properties panel on the right side of the canvas, set them up in Bootstrap mode and set the right col to 3 and the left col to 9.

  • At the top of the content we have a text component that states Dashboard. Create a col for it and set its size to 12. This way the column will take up the whole space of the row.

  • Below it we have a dummy Lorem Ipsum text and an illustration. Create two cols and place the custom HTML element that contains the text in the left one and the image in the right one.

  • We should set a separator between the two. We could set a gutter or experiment with the margins of the two components, but to make it truly responsive, we will insert a third col in the middle, so the space is responsive in all resolutions. Select the row in the responsive layout tree and select the Col button. Now, select the new col and drag it between the other two in the tree.

  • Set the left col to 6, the middle col to 1 and the right col to 5. The canvas at the moment should look like that:

Initial Positioning

  • In the sidebar col, create a row. In the row drop the following:

    • the component with text "Profile".
    • the Image that is below it from the absolute design
    • the component with text "Ann Anderson"
  • The components take up the whole containing row, so set the size of each to 12.

  • Now the canvas should look like that:

Initial Positioning

  • Lets's generate the app to see how the project is coming along so far. Press the Generate button in the toolbar to generate the app. This will apply the changes and since we are in the Responsive tab the server will open the app in that mode.

Initial Generated App

  • We are getting close to the required design, but there is still quite a lot to do. One of the things we would need to fix is the background of the dummy text and the illustration.

  • If we open the Design tab and inspect the background element, we will see on the right in the Styles field that the background property is set to #A0DDDD.

    Design Styles

  • To translate this, switch back to the Responsive tab and select the row. On the right you will see a CSS Class List property. Enter a card-1 class.

  • Open the Code tab, find the file dashboard.view.component.scss and add the class .card-1. Set a background property with the value we got from the absolute design:

Custom CSS

  • Regenerating the app will show that the new background color has been applied.

Changed Background Generated App

  • Now it's just a matter of transferring the absolutely positioned design styles to the responsive layout. Some more information that can help you with that task can be found in the options at your disposal section. You can also go through our Sample App for ideas how this can be achieved.

Building and Publishing the Application

Now it is time to publish the app and show it to the world.

  • Click the App & Data button on the toolbar.

  • Select the Build App button. You will be presented with the option to build for Release or for Debug. Select the Debug option and build the app

  • The built artifact is located in the /build-output/debug. This is the content you should expose through a Web Server. An easy way to try the app out is using the angular-http-server npm package. Just use npx angular-http-server in the root of the build output.

  • You can find more about building and publishing in the corresponding section

Sample App

Unite UX app with responsive layout

In this article
Not finding the help you need?