User interface and a deeper explanation of the tool

This entry describes the user interface of Cloud App Studio

General user interface.

Illustration I - main user inteface

Breadcrumb

The breadcrumb trail lets you navigate "back" in the structure of Cloud App Studio (so it is really not a true breadcrumb trail that showd you exactly how you came to a certain place in the application) 

Current content
The current content shows you what component you are currently working with, and the name of your component, for example: "Form: Survey" - where "Form" is the component "type" and "Survey" is the name the administrator of the application has given the component. You can always change the name of your applications and components without creating trouble for sent links, etc. Each component is stored with a unique ID (that can be seen in the - rather difficult to read - url.

Action bar
The Action bar is where all actions take place - this is where you create, save, open, etc. To minimize the number of actions shown to the user, less frequent actions are gathered under a "more"-menu in some of the components. You can always find the "delete"-action under the "more"-menu, for example.
Keyboard shortcuts on actions
Some actions have keyboard shortcuts. Here is a list of all shortcuts, and also where you can find each one. Note: use a combination af the "alt"-key and a character:

• alt-n, "New App", "My Apps" view
• alt-x, "Back", on all views, except "My Apps" view
• alt-s, "save", in all "builders": "Form", "View", "Layout"

Component navigation
Component navigation is what you use to navigate to the different tools: "Forms", "Views" and Layout (and more to come, as seen grayed out in the navigation).
To create a new Form for example - first click "Form" in the navigation. This opens the view that lists all Forms. Then click the "new +"-link on the Forms link. This opens a modal window where you give your new Form a name. The Form is created once you have saved it. The same goes for Views.

Illustration II - component navigator - click "new+" to - in this case - create a new Form.

Workspace
The Workspace is the area where your components are listed - in views. It also represents the area where you "work": where you add your fields in the Forms-builder and where you customize the View, by adding, dragging and dropping columns.

Views, input, output and export.
Whenever there is a listing of similar objects, it is presented in an "application view". The view consist of different columns depending on what objects to be listed:

Illustration III - List of applications

Input

Data is created using "Forms". The Forms builder, as we call it, lets you add fields. This is then (normally) shared with others letting them create data for you and others to continue working with. Simple.

The Form has two different "modes": "Sorted", or "Free form".

Sorted adds the fields, one on each line. drag and drop the fields and elements to change the order.

Free form lets you drag and drop the fields (elements are excluded in the free form-mode) to whatever position within in the workspace area. 

Note: today it is only possible to "embed" a form in its sorted mode. This means that if you have a "free form Form" and embed it into your current web site, it is the sorted version that is rendered.

Currently the Forms-builder support the folloing fields and elements:

• Label, use this to enter plain text. 
• Text field, add a label, default value (if any) and select if to be "required"
• Multiline field, add a label, default value (if any) and select if to be "required"
• Radio buttons, add a label, values (one per line), "selected value" (if any) and select if to be "required" (which is only applicable if you don't add a "selected value")
• Checkbox , add a label, values (one per line), "selected value" (if any) and select if to be "required" (which is only applicable if you don't add a "selected value")
• Drop down list , add a label, values (one per line), "selected value" (if any) and select if to be "required" (which is only applicable if you don't add a "selected value")
• Horizontal line, adds an HR - note this is only applicable when using the "Sorted" mode
• Line bread,  adds a BR - note this is only applicable when using the "Sorted" mode
• File, add a label. This allows the users to add files in the content they create. There is currently a limit set to 5Mb/attached file. The attached files are presented in a list format on the content, aswell in the views if configured that way.

Illustration IIII - Available fields and elements in Form-builder (when using Form type: "Sorted")

Output

View builder
The viewbuilder lets you create custom views, or lists if you wish to let you and the "Editors" (access level that has access to custom views) work with submitted data.
In the View builder you can easily add fields from multiple Forms - if you have more than just one Form in you web application, or from just one selected Form.
You start by selecting which Forms you want data from and click "Copy all columns from selected forms". Then drag and drop the columns to change the order.

Illustration V - View-builder

Illustration VI - Click,drag and drop the to rearrange the columns.

You can click the sprocket to change the properties for each column, to change for example number of characters to display in the column, if you want the column to be sorted (ascending/descending), of you want a particular column to be the link to open the content (in edit mode).

Illustration VII - View properties: add/edit field, change the column header, length of content displayed in the view, sorting and if the column should act as link to the content.

Export

In this - current - release it is possible to export your default views in an Excel-format, as well as to Google Drive. Both of these solutions let you continue work with your data in a spreadsheet manor.

Illustration VIII - The default view

The default view is created automatically when creating a Form. This presents the submitted content related to one Form, where custom Views can show content from multiple Forms.
You find the default view from the listing of your forms "Show Results", or from within the Form, under the "More"-menu.

Export to Excel
Here you can Export your entire view as an Excel formatted file - to be opened with your spreadsheet editor. The format supports Excel 2007 and later versions. It is formatted as an HTML-file so Excel will display a warning that the file is in a different format than specified in the extension. This is just because the file is in xls, but set as html in underlaying data information.

Illustration IX - Excel warning when opening the exported view.


Google Drive
When exporting to Google Drive, you first will get a permission request to view and "manage" files in your Google Drive account. Don't worry, the only thing this does is to create a file - a spreadsheet in your personal Google Drive account.

Illustration X - Google Drive export - first time export permission request.


This request only happens the first time you export your view to Google Drive. If the permissions would change - for some reason - you will receive a new request.

When the export is completed, a new tab is opened. Here you can choose to open the exported spreadsheet, or go back to Cloud App Studio.

Illustration XI - Google Drive export successful.

When opening the spreadsheet it is an unformatted spreadsheet where you can continue to do your work. The file is named following this format: [App name] - [Form name], for example: "MyApp - MyForm".

Illustration XII - The exported Google Drive Spreadsheet, ready for action.

The file is exported to the root of your Drive.