Using the Designer

Using the Designer

Opening the Designer from a SharePoint List/Document Library

In order to start designing and using an Openous form for a list or a document library, just navigate to the list and use the command bar (modern UI) or the list ribbon (classic experience) respective option.
Openous Option in SharePoint Modern UI Experience


Openous Option in SharePoint Classic UI Experience

You will then be taken to the Openous designer for the selected list. The designer provides an environment that splits the screen into four parts:


(1) Top Ribbon



The ribbon contains the main Designer actions, some of which are contextual, which means they change based on the main area selection: The “Actions” ribbon section depends on what is selected by the user. The common options (along with their keyboard shortcuts where applicable) of the ribbon are:

File

  1. Save (Ctrl+S): stores the form customization. 

All form design definitions are saved within a list named “OpenousCustomizations” within your site. It is strongly recommended that you enable version history in this list for Backup reasons. For more info see Form Customizations Storage and Backup

Edit

  1. Undo (Ctrl+Z)/Redo (Ctrl+Y): commands for the last action performed in the designer
  2. Delete: deletes the selected control
  3. Copy (Ctrl+C): copies the selected control
  4. Paste (Ctrl+V): pastes the selected control (applicable only when a container control is selected)
  5. Copy Definition: applicable when a control is selected. Displays a textual (json) representation of the selected control (along with its full properties), so that you can export/copy/modify it and paste it later on using the “Paste Definition” command. Extremely useful for transferring multiple controls at once throughout different form customizations, or even for partial backup reasons.
  6. Paste Definition: applicable only when a container control is selected. Prompts the user to paste a json definition of a control (usually taken from a “Copy Definition” command), so that this control should be appended within the selected container. 

Editor

  1. Search Controls: Provides the ability to search within the “Name” or “Type” properties of the form’s controls, by typing within the search textbox. Matches (controls that contain the search term in these properties) are highlighted in green border. For example the term “textb” will highlight all textboxes in your form, while “title” will highlight all controls that contain the word “title” in their name. 

Re-create form

This section can be used to re-arrange the form controls into different ways. Please note that re-creating the form will result in loss of the current customization.


The following parameters can be set in order to produce the final proposed outcome of the form’s look and feel:
  1. Columns: defines how many controls will be placed in each table row. A value of 1 means that one field per row will be applied.
  2. Labels: defines the alignment of the field’s label against the input control. Possible values are “Above” and “Left”
  3. Tab control: determines whether the form’s controls should be placed within a tab container.
After selecting the above parameters, the “Create” button should be clicked in order for the re-design to take place. 

Content Types

This section includes info about the name of the list, as well as the selected content type. For example, if a list contains two content types, “Item” and “Contact”, this section will display the content type for which you are customizing the form. Openous provides the capability of maintaining different form customizations per content type. In order to select and design a form for a different content type in your list, click on the “Manage” button, and select the desired content type in the popup screen:



You can select or delete the selected content type form design. If a design is already saved for a content type, you will see the  indication next to the content type name, along with its customization ID.  

Actions

This section adjusts to the selected control. Depending on the type and the location of the control, the following options are shown or enabled/disabled:
  1. Move Up (applicable only for controls that are immediate children within a Container): moves the control above its current position (shifting the above control below it)
  2. Move Down (applicable only for controls that are immediate children within a Container): moves the current under its current position (shifting the below control above it)
  3. Convert To: Changes the type of the control to another one, keeping the same values to the common properties (style, font, value, etc). Depending on the selected control type, different options are available. For example, table containers can only be converted to other container controls. 
  4. Append Row (applicable to Table Containers): Adds a row at the bottom of the table
  5. Append Column (applicable to Table Containers): Adds a column at the right of the table
  6. Add Column Left (applicable to Table Containers, when one of its cells is selected): adds a column at the left of the selected Table Cell
  7. Add Column Right (applicable to Table Containers, when one of its cells is selected): adds a column at the right of the selected Table Cell
  8. Add Row Above (applicable to Table Containers, when one of its cells is selected): adds a row above the selected Table Cell
  9. Add Row Below (applicable to Table Containers, when one of its cells is selected): adds a row below the selected Table Cell
  10. Delete Row (applicable to Table Containers, when one of its cells is selected): Deletes the entire selected cell’s row 
  11. Delete Column (applicable to Table Containers, when one of its cells is selected): Deletes the entire selected cell’s column
  12. Increase Column Span (applicable to Table Containers, when one of its cells is selected): Increases the column span of the selected cell, by expanding it to the right
  13. Decrease Column Span (applicable to Table Containers, when one of its cells is selected): Decreases the column span of the selected cell, by collapsing it to the left

(2) Left Control Toolbox

This is the list of available controls (UI Elements) that can be used in your form. You can search for a control type based on its name by using the text field in the upper left corner of the screen. Each control type can be added to your form by dragging and dropping it to the desired location in the Design Area of the page, as long as the drop area is within a container element (Section, Simple Container, Form, Table, etc). e types of controls within the toolbox are grouped based on their category:

Action Controls: UI Elements that hold no data, used mainly for user actions within the form (for example, buttons). More info is available to the Action Controls section
Data Controls: UI Elements that store and display data (for example textbox, combobox).  More info is available to the Data Controls section
Containers: Placeholders for hosting other controls, such as Table or Tab. More info is available to the Containers section
SharePoint Controls: Complex elements exposing SharePoint-specific functionality, for example Save Button or Attachment Uploader. More info is available to the SharePoint Controls section
Unused Fields: Controls bound to SharePoint columns that are not used within your form. If you add a new SharePoint column to your list, then a new entry will be available under this group, with the proposed UI element for this control (for example, if the column type is Single Line of Text, a Textbox will be auto-generated).
Related Entities: Pre-configured ListBox controls that can be used to display related list items for your main record, in order to implement a basic view of a Master/Detail scenario. Openous searches for other lists that include a lookup column, with a relationship to your main list.  For example, if you had a “Countries” list, and a “Cities” list that contained a “Country” lookup column, you would see a pre-generated “Cities” ListBox control in this section:




(3) Design Area


The design area is the location where all UI elements of your form are placed. It behaves in a WYSIWYG fashion, in that your final form look n feel is close to the content you see in your screen at design mode.
Controls can be added by dragging them from the toolbox and dropping them within any container in your form. The root element of any new form in Openous is always a form control. Selected objects are can be moved to other locations/containers within your form using mouse selection and dropping. The selected control's properties are displayed on the right part of the designer (properties panel - see below).

(4) Properties Panel



This section contains all properties and events of the control that is selected in the Design Area, much like it’s done in Visual Studio or other IDEs. The section splits in three tabs:

Properties
All selected control’s attributes, categorized based on the property type and its usage (Appearance, Behavior, Data Binding, etc). All properties are searchable by name through the “Search All Properties” textbox using “contains” logic. 
There are two views in this tab: Basic (“View Basic Properties” - default), and Advanced (“View Advanced Properties”), which narrow down or expand the properties list accordingly. Basic view displays only the most common/frequently used properties, however search is conducted to all properties regardless of the selected view. You can change any of the selected property values, by typing/selecting/clicking next to the relevant property name. Each property has a different type, therefore editing the value can be different for each one. 

By selecting “Changed Properties Only” the list of properties you are seeing is narrowed down to show only the ones where you have changed the value from the default one. 



Events

Lists all the events that the selected control exposes. You can change the script of the selected event by clicking “Edit” on the desired one. All events are searchable by name through the “Search Events” textbox using “contains” logic.


For more info regarding events see Basic Concepts: Events and Scripting

History 

Lists the history of actions you have done while you are designing your form (control move, addition or property change) and provides the ability of undoing/redoing them. You can select any of the stack of performed actions until the “Initial State” (the state from which the form design was last loaded) and press the “Undo” or “Redo” action accordingly. 


The Disk icon next to an action indicates the last Save operation that was performed.