Quick start: Create your first form with Openous

Quick start: Create your first form with Openous

Introduction

In this crash course, you will learn how to quickly create a new SharePoint form using Openous and customize the colors, layout and functionality with a few clicks. After that, you will publish and use this new form as the main editor for creating new items in your custom list. 

Scenario

Let’s assume that you are a site administrator, and there is the following list in your SharePoint site.

List Title: Countries

Columns: 
  1. Title (single line of text)
  2. CountryCode (single line of text)
  3. CurrencyCode (choice), with choices: USD, EUR, GBP

Step 1: Navigate to your list and click “Openous Forms”


Step 2: Use the designer to customize the look and feel of your form

You will initially get a proposed layout for your form elements, placed in a Table Container. Notice how one UI element (“control”) is created for each of the columns. 


You can manually re-arrange the controls in a drag n drop fashion, or choose a different proposed layout. Assuming that you prefer:
  1. A two column layout contained in a Tab control
  2. Bold labels with different size, text and color
  3. No attachments
  4. Wider Combobox for Currency field
  5. A calculated label that automatically displays the Title, Code and Currency Code of the Country, for example: “France (FRA) has EUR currency”
You can perform the following simple actions:
a) Modify accordingly the “Re-create” form options (2 columns and tab control), and press the “Create” button:


b) Rename the tab’s title to “Country Info”, by selecting the Tab Page and changing the “Header” Property


c) Change the labels’ text (to “Code” and “Currency Code”), by selecting the labels and modifying the “Value” property


d) Adjust also the font size, font bold and foreground color properties according to your needs


e) Change the “Visible” property of the Attachments container (or you can even delete it), in order to hide it


f) Increase the column span of the Country Code combobox so that it spreads across multiple columns. This is done by selecting the table cell and clicking the “Increase Column Span” option in the Actions toolbar:


g) Insert a new calculated label: Select the table container and add a new row at the end of the table:


Drag and drop a new Label control from the control toolbox on the left to this new row. This will be a calculated label that will automatically change according to the values of the rest of the controls. For this purpose, a calculation formula will be used as a value. 



Next to the “Value” property, click “Edit” and add a new Formula Data Provider, with the following formula:





{Title} + " (" + {CountryCode} + ") has " + {CurrencyCode} + " currency! "


Your form is ready. You can now save your design using the “Save” button on the upper left corner of the Designer.
More info about Openous Designer usage and options: Using the Designer

Step 3: Replace the out of the box SharePoint “New Form” with your Openous form

Click the “List Settings” icon on the upper right corner of the Designer, you will be able to see the available form types for this form. 


Next to “New Form” select “Openous form”.
That’s it! Your form is now ready to be used. Go back to your list and click “New”. 


See Also

That was just a very simple demonstration of the numerous capabilities of Openous form Design solution for SharePoint. For more UI customizations and advanced business solutions using Openous, you can check the rest of our knowledge base, starting from the following links: