Embedded form example

<script src="http://cloudappstudio.appspot.com/app/tdf4KZhC/inject-form/ikZnJZth?style=jquery&skin=sunny" type="text/javascript"></script>

"Coding" tips and trix - adding that little "extra"

Coding tips and trix

Embed-code

Forms and Views can be embedded into your web site you use today. It is very easy.

Note: You need to set the accurate access level to let your users see you components. Forms should have specific, or "Anyone" set to "contributor" - Views requires "Editor" to be rendered.

The code for a Form, for example, is found under the "Share and Embed"-link in the "More..."-menu. At the bottom of this window, you copy the following code - note this is just an example of a public form (you can use this just to test this function):

<script type='text/javascript' src='http://cloudappstudio.appspot.com/app/tdf4KZhC/inject-form/ikZnJZth?style=jquery'></script>

Notice the last information in the src-property (the query-string):

?style=jquery

This informs to render the embedded component using a, so called, jqueryui-code. This means that the embedded component will render its look and feel based on the selected "Fonts & Colors"-setting in the Layout-component.

Illustration I - "Fonts and Colors"-section in the Layout builder.

There are additional options for the query-string to exclude the "Fonts & Colors"-setting:

?style=basic

...and to override the App-settings add the parameter "&skin=[name-of-skin]:
?style=jquery&skin=sunny

This will render all fields without "jqueryui" - a more simple way to render your form.

The last option to render the embedded Form with a specific "Font & Colors

Illustration I - The "Embed and Share"-window

Illustration II - ?style=basic

Illustration III - ?style=jquery

Illustration IIII - ?style=jquery&skin=sunny

Embedding a view

The view can be embedded in a very similar way. You find the "embed"-code under the "More..."-menu in the view you want to embed.

Illustration V - Link to "Embed" is found under the "More..."-menu

<script type='text/javascript' src='http://cloudappstudio.appspot.com/app/[appID]/inject-view/[viewID]'></script>

The "appID" and "viewID" is unique for each view and this value is something automatically added by Cloud App Studio.
The view can either use the "Fonts & Colors"-setting applied to the web application, or you can specify a "jqueryui"-theme to the view by adding the following "query string":

?style=sunny

Example: 
<script type='text/javascript' src='http://cloudappstudio.appspot.com/app/[appID]/inject-view/[viewID]?style=sunny'></script>


Adding HTML-code in your Layout-builder

You can add almost any HTML-code in your rich-text editor (which is the open source editor "TinyMCE", for those interested) - apart from <script>-tags.

One neat thing to do is to extend your "Font  & Colors"-selection by adding areas that inherit values from those settings.

Illustration VI - The HTML-icon marked in the Rich text editor.

Click the HTML-icon in the rich text editor.

Add the following code-snippet:

<div class="ui-state-active ui-corner-all" style="padding: 2em; margin-top: 4em;">This is my Header</div>

Illustration VII - Adding the class for a div will created this appearance, when having the "Font & Color" set to "UI-darkness"...

Illustration VIII - ...and it looks like this when the "Font & Color" settings are set to "Dot Luv"

Another sample code, easy to use could be:

<div class="ui-state-hover ui-corner-all" style="padding: 1em; margin-top: 4em;">Copyright Some Company Inc.</div>

This will use the "ui-state-active" class from the "Fonts and Color" selection and it will make all corners rounded with the "ui-corner-all"-class.

Other classes that can be used can be found here - if this is new to you: trial and error. Remember: You won't break anything :-)

http://jqueryui.com/docs/Theming/API

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.

Cloud App Studio basics

Introduction
Cloud App Studio is a tool where you can create web applications. A web application is where you and the people you choose can collaborate around data. Data created by: you and the people you have invited.

An example of a Cloud App Studio based app could be a simple form that lets users create content, combined with a view that lists all content. For example: you could have an app that lets your users report when something is not working in your building: lights gone out, paper missing in toilets, broken things, etc.The caretakers then get the information from people that find the problems, rather then they need to find all problems themselves.

Illustration I - Data, or "content", is created using "Forms" - Content is presented in "Views"

No need for programming skills
Cloud App Studio does not - I repeat: does not require ANY programming skills. You add your fields you need. give them a label and maybe default data. Select a check box to make it a mandatory field. Then your done - you don't have to define any "data-tables", relations, or other techie-stuff.
You can even position them exactly where you want your fields to be by dragging and dropping (using the Free Form layout-option)!
Once you've saved your form (and set the sharing properties you want) you are all public. By "all public", we mean your Form will use  Google's infrastructure provided by Google App Engine. This is the same infrastructure used in Google's other highly proven services! Isn't that amazing :-)

Creating the view is as simple: you select which fields you want in your view - based on an entire form, or by adding them separately. Re-order by drag and drop.

Built on Google App Engine
Cloud App Studio is built on top of Google App Engine. This provides the best abilities for you to have a scalable solution without you having to think about all that. It scales when necessary.
This let you login with your Google-, or Google Apps account. Currently this is all we support. In extension to this you can activate Facebook authorization to activate users logged in on Facebook to work with your web application. This is something you activate for each web application depending on your needs.

Cloud App Studio consist of a set of "Components" to serve the needs to create a web application. We are continuously adding more components and add functionality in the components available.
When writing this, we have released the following:

• Forms - Let you create a form without any programming skills. Place your fields wherever you want by drag and drop, for example.
• Views - Used to present the submitted data. Add/remove columns in the view, reorder by drag and drop.
• Layout - lets you brand your app by adding a navigation to all forms and views, it also let you add rich-text formatted headers- and footer fields to give your web application a consistent experience.

Components in our beta environment are:

• Page - the first component aimed for programmers, use HTML to create your web application. We also have plans creating a no-Code Page component.
• Files - a place to store your files: images, documents
• Scripts - To add functionality to your web application, for example having a scheduled action export all your data to Google Drive, as a backup solution - as an example.

Security model

Currently there you can select among three different access levels:

• Administrators, have complete access to the web application as well as submitted data.
• Editors, cannot modify the web application, but see and edit submitted data
• Contributors, can only see the Layout and the Form, letting them submit data. They cannot see the content of the views (currently they can see the link to the views in the web application navigator, but not access the data.

In addition to this you can set access to:

• Anyone, can have "No access", "editor" or "contributor". "No access" is default
• Facebook users, needs to be activated as part of the Web Application settings. When done, they can have the same access levels as "anyone".

Best practise to create a web application in Cloud App Studio

Application flow - what to create and in what order-best practise

1. Set sharing settings to let others interact with you web application

Illustration I - You find share settings from the "More..."-menu, or on the App start page.

Illustration II - This application has given "Anyone" "Editor"-access. This lets anyone submit data using Forms, aswell as see all submitted data presented through views.

1. Start creating a Form.
• optional: change the form to "Free form" layout letting your position your fields in whatever order. The tabindex is controlled through the order of your fields in the "sorted" form layout. The easiest way is to start adding your fields and arrange them in the order you want the users to enter data and then switch over to "Free form" and position them.
• optional: Change the message presented to the users when they have submitted the form - either as html-formatted text, or re-direct them to another web page.
2. Share your form (can be found under "share and embed" in the "More"-menu:
• Send a link to the form
• publish a QR-code (all forms have pre-generated QR-codes, linking to the current form)
• embed in your current web site
  
  Remember that you can only share something that available to the users: Application-sharing settings.
3. Brand your app using Layout
1. Set the fonts and colors-settings - select among 22 predefined variants. These are all based on jQueryUI-themes (see under "Gallery" on the left hand side). 
2. Select if you want to activate/de-activate the "navigation". The navigation creates a menu with links to all your components: Forms and Views.
3. Add rich content to the header and footer fields. If you have activated the navigation, it might be a good idea to start the header formatting with a carrige return to create space to your header content - such as your logo.
• You can currently only link images, such as your logo. Reuse the url to your logo from your current web site to add it to the header field.
• You can format the header and footer fields using HTML, by clicking the "HTML"-icon.
• Other formatting you can do is:
  
4. Save your Layout and open your App to see your modifications
4. Create your custom views
1. Whenever you create a Form a default view is created. This view can be reached from the "more"-menu in your Form, or from the Forms-view (where all your Forms are listed). It is called "View results", so this is optional if you want to:
• collect data from multiple Forms
• have a custom view with just a selection of Fields and custom properties for each added column (sorting settings, set # of characters shown in the column, show colums as link)
2. To change the order of the columns, you just drag and drop the column to where you want to move it. Click the trash-bin-icon to remove a column.