APPs Building - Nifty Tips & Tricks for Beginners

When you start to build your own APPS, there are many new things to learn in the beginning, especially when you don't have a software development background. But beneath learning about the general structure of the ONE DATA Markup Language (a simple JSON-based language to describe APPS, short ODML) and the possibilities it brings, it can be very helpful to also invest time to gain some knowledge about the development environment you're working with - the APP Builder. It is structured pretty similar to common software development IDEs (Integrated Development Environment), and there are some Tips & Tricks to very much ease your work. 

In addition to knowing about the working environment, there also exist some common good practices, that will make APP developing easier, especially when working together in a team.

In this article we will discuss some Nifty Tips & Tricks that will hopefully make your everyday life building APPs more pleasant.

Article Content

• Article Content
• Plan Your APP Properly Before Starting to Work on It
• Split Your Work Between APP Building and ONE DATA Workflow Engineering
• Collapsing of JSON Code and Describing Comments
• Choose Good Names for Your IDs
• Right Clicks on Elements to Jump to Different Definitions
• Dialog Editor
• Editor Context Menu
  • Go To Symbol
  • Change All Occurrences
  • Format Document
  • Command Palette

Plan Your APP Properly Before Starting to Work on It

This point is pretty common, but it can't be said too often, especially in the context of APP building - plan your work before you start developing. Make up your mind on how the layout of your APP should look like, and also which pages it has, and how you want the users to navigate between them (More information on pages and navigation can be found here).

In this section, we will mainly focus on the planning of your layout, because this can be a tricky part.

So after defining how your layout should look like, we now need to apply it to the APP. To do so, you don't need to define the actual elements yet. It is enough to define the position and sizes of the containers without placements, then the APP preview will show the sections with gray background and respective container ID. 

If elements are already placed within the container, it can be more difficult to plan, because then it is fit to the elements and the background is colored white, so it is not possible anymore to see what size the container has.

The following screenshot shows the use of fixedGrid to plan and position the App containers.

In the picture you can see five containers placed on the page, that do not contain elements yet.

Another useful feature is flexGrid based on the CSS grid. It is slightly similar to the fixedGrid in terms where containers are also defined using an array within the config.
Containers in flexGrids are arranged through rows and columns defined in grid.configs (as seen in the screenshot below) along with their respective sizes. Using their container ID, they are also assigned a cell (intersection of rows and columns) using the section template under grid.configs.

The following code chunk contains an example with commented details.

This is a nice way to check whether your planned layout works in the APP Builder, and also helps you structure your work. With this method you don't need to always switch between defining elements and adding them one by one to the layout.

Split Your Work Between APP Building and ONE DATA Workflow Engineering

To build a fully functional APP it is not enough to create the view within the APP Builder. Most of the time you will want to display certain data, which is computed by a workflow or stored within an uploaded data table, or even trigger workflows inside of the APP.

The picture below shows how the Modules of OD interplay with the Builder and the APP Viewer.

So when developing larger APPS in a team, who will simultaneously work on the APP and the workflows, it can ease the work to specify the data schemas that will be displayed beforehand. Doing so, the data scientist knows how the result's schema should look like, and the APP Builder knows which types of datasources to define.

Also, as soon as the data tables containing the final data to display are defined with the correct schema, the ids can already be shared to the APP Builders as they wont change afterwards. 

Collapsing of JSON Code and Describing Comments

In the APP Builder you have the possibility to collapse the code of JSON objects and arrays. This can be useful if you want to focus on certain code parts, or you want to navigate more quickly through the code as more sophisticated APPs will have a rather large code base. To achieve this, just hover your cursor over the line numbers on the left hand side of the editor, and the collapse nodes will appear.

To ease the navigation through collapsed nodes, it is good practice to describe what the node contains. The best way to do this is to just comment it above the node as the comments will not be hidden by collapsing the JSON objects.

Choose Good Names for Your IDs

It is really helpful, especially when APPs grow bigger, to choose meaningful names for all your ids. It makes reading the ODML code easier because you don't need to always switch between code parts, if you want to know which id belongs to which datasource for example.

That also helps avoiding bugs within the APP. If the names of the ids are to common, it could happen that you use the wrong one for referencing something or you accidentally define to objects with the same id, which will ultimately break the APP.  

Right Clicks on Elements to Jump to Different Definitions

The preview of the APP builder allows for more convenient navigation inside the JSON APP code. You can at any point do a right-click on an element in the preview and a dialogue opens, offering you three possibilities to navigate. The editor panel will then directly jump to the selected APP element's code.

The menu has different navigation options:

• Navigate to element definition: When selecting this option, the cursor will jump to the code section where the selected element is defined.
  
• Navigate to layout definition:  With this option, the APP Builder will guide you to the layout, on which you right-clicked.
  
• Navigate to datasource definition: This option will navigate to the respective datasource of the element.
• Navigate to container definition
• Navigate to placement definition

These options will only work if the respective code parts, you want to navigate to, are already defined.

Dialog Editor

With the dialog editor a possibility is supported to more easily change the values of your APP JSON code. It can be accessed by selecting a respective value and pressing the F9 Button. This will open a small prompt in which the value can be entered.

This is especially useful when writing SQL queries, as the dialog editor supports some color coding and an automated collapsing after the query has been specified in the editor. This can be seen in the following GIF. An SQL query can be split into its essential parts in the dialog editor allowing for better visibility, while the whole query will be collapsed into one line for the APP code.

Editor Context Menu

In this section, we will have a closer look at the context menu of the editor. It contains some powerful tools that make your everyday life with the APP Builder more pleasant. Like any other context menu, it can be opened by right clicking anywhere in the editor. (For some functionalities, it is necessary to open the context menu on a certain code part.)

Go To Symbol

By clicking this option another menu is displayed, which lets you jump to almost any code part within your APP. You can either search a specific symbol by text, or look if the part of desire is already in the recommendation of the menu.

Change All Occurrences

To use this option, you need to open the context menu on a specific expression. It will then select every word that is equal to it. By editing it, it will change the occurrence of every word. But be careful what you edit in order to not break your APP!

Format Document

This option is pretty straightforward to explain. If you select it, the APP Builder will automatically format all code in correct JSON format. This option will only work correctly, if there are no syntax errors in your code!

Command Palette

This option will open a menu which shows all command shortcuts for the APP Builder, which we will not explain in detail in this article. But the table below gives information on the most common useful shortcuts.