Thursday, September 13, 2012

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.

No comments:

Post a Comment