Skip to main content
waffle.svg
Domo Knowledge Base

Making Illustrator Apps as a Non-Technical User

Intro

Let's say you want to tell a better story than you currently can with cards but lack the technical ability to build a custom-developed App using the Domo SDK. The ideal situation is to create a responsive App that allows users to change between dimensions and time granularities without ever touching HTML, JavaScript, or SQL. You can do this by building an App in Adobe Illustrator and the Domo Design Studio. You can structure the data to have Total, Yearly, and Monthly views as well as a "Sales vs. Renewal Sales" dimension that allows users to dynamically change granularities and dimensions by using Page Filters.

This content was shared during our Domopalooza 2017 Tips and Tricks session. For more information about this session, see Tips and Tricks: Quick Lessons from Power Users.

Prerequisites

To use Design Studio, you’ll need:

  1. Adobe Illustrator 2017 CC or 2018 CC.

  2. Credentials for a Domo account

Installing the Domo Design Studio

For instructions on installing the Domo Design Studio, visit https://developer.domo.com/docs/design-studio/App-overview and click on the header title “Install Design Studio.”

Design Studio Templates

We have created Design Studio templates that can be downloaded and opened in Adobe Illustrator. These templates can be used to brainstorm, recreate your own Apps, or you can just wire the App up with your own data. To download the templates, visit https://developer.domo.com/docs/design-studio/templates and simply click the image of the template you want to download.

Using the Design Studio

Full documentation on the App Design Studio and its functionality can be found here https://developer.domo.com/docs/design-studio/build-your-design-studio-App#Create%20a%20New%20Design

Solution Configuration in Domo Design Studio







Setting Up the Data

1. Understanding the data requirements

Each widget requires its own table structure in order to function properly. To view the required table structure, go to the widget configuration window in the Domo App Design Studio and click the tab labeled Data. The following window has a preview of a sample data table powering the App.

The widgets in this example App are all structured to handle only 1 row of data from a full table.





2. Setting up the data - part 1

To create the Page Filters, all data slices need to be built into the underlying table. Also, all numeric values need to be aggregated to one row for the widget to read the data accurately.

 

  1. Open a new Magic ETL DataFlow.

  2. Drag on the input action onto the canvas and select the correct DataSet.

  3. Drag the Group By action to the canvas and connect it to the input. The Group By action aggregates your numeric values.  In the example App, I want a total grouping, a monthly grouping, and a yearly grouping.

    1. For the total grouping, select the agent_ID column as the column that identifies the grouping and then select your numeric values in the new aggregated column.

    2. For the monthly grouping, select the agent_ID and the month column as the columns that identify the grouping and then select your numeric values in the new aggregated column.

    3. For the yearly grouping, select the agent_ID and the year column as the columns that identify the grouping and then select your numeric values in the new aggregated column. 

  4. Now that the groupings are created, labels are needed so that the variables can be found in the Page Filters.  Drag the Add Constant action onto the canvas and connect it to the group by action.

    1. For the total group by, add a new column titled “date_grain” and add the constant value as “TOTAL.”

    2. For the monthly group by, add a new column titled “date_grain” and add the constant value as “MONTHLY.”

    3. For the yearly group by, add a new column titled “date_grain” and add the constant value as “YEARLY.”

  5. The final step is to combine all of the views together.  To do this, add an Append Rows action and connect all of the Add Constant actions to it.  Under the Append action configuration, set it to include all columns.

     

  6. Create an output DataSet and run the DataFlow.

Your DataSet is now configured to filter across time grains.  When the Page Filters interface is open, you will see a new column titled “Date_Grain” that has your newly created filters on it.

3. Setting up the data - part 2

Every widget in your design has the ability to be powered with ANY DataSet you have in Domo, including Domo Magic (provided it has an acceptable schema). To power your widgets with different DataSets, select Edit Card in the Wrench menu and you will be brought to the Domo App’s wiring page.

At the top of the page, you’ll see a live preview of what your Domo App looks like and just below that, there is a list of all of the widgets that you have included in your design. To swap a widget’s current DataSet with another DataSet in Domo, simply click on that widget’s name in the list (1). From there, you can choose the new DataSet (2) you would like to use, and map the column names of that new DataSet to the column names that the widget is expecting (3). You can also hover over any column name in the data preview to select grouping or filtering for that column (4).

When you are finished powering your widgets, you can click Save & Finish and your Domo App will now be powered using new data from the DataSets that you have chosen.

Congratulations, the App is now wired and ready to use with Page Filters.