Creating a Form
6 min
forms are created within the form editor you create a form associated with a business object, which in turn is used within a layout for users to view while you can add more than one component to a form table cell, it can have an adverse effect on your form display adding elements causes the width and height of adjacent cell to increase columns expand to the width of their largest field name or control from the configuration console, click build > business objects open a business object > forms > add new form the application shows a blank form enter information into the fields these options apply to the entire form, not individual components field description display name a unique name for this form description a brief description of what the form is used for show control borders shows the boundaries of the controls you insert show layout cells shows the outline of each cell in a list format show tab indexes shows the tab indexes audit views logs each time the form is viewed default cell margins the number of pixels for each cell to have the order is top, right, bottom, left, or click the down arrow to enter the values in the diagram to apply a style to the form, click form styling , enter values from the pop up window, then click save styles defined here are superseded by styles defined in individual controls see also example using the selectorformat property to change a style on hover docid\ ealzqhhx4c 6sp xmvrf field description form style the style used for the overall form choose a style from the drop down list see using highlighter styles docid\ ealzqhhx4c 6sp xmvrf label style the style used for the labels in the form control style the style used for the controls in the form drag a field, relationship, or other control onto the form you can drop the component when you see the green check mark fields includes all fields defined for this business object for example, the urgency field has been added to an incident form called incident dataentry the application stores a value entered in the urgency field on the incident dataentry form in the incident business object relationships you can add a field from a business object relationship provided the relationship is one to one or many to one this includes all business objects linked with this business object through defined relationships for example, the incidentdetails form includes a customer name field allowing you to search through the display names returned from the employee business object when you select a name, the application automatically populates the rest of the customer information other includes controls and graphical elements for example, the incident brief form includes a pair of lists displaying recently updated tasks and recent activities see about the "other" form controls docid\ fxfq9thrwzirenpi8ygnp available fields and components are derived from the business object associated with the form drop in the blue area to place the component next to an existing component in the same cell drop below the blue area to place the component in a new row below the existing cell drop to the right of the blue area to place the component in a new column next to the existing cell to remove a control, select the component and press delete on your keyboard adjust individual cell properties from the cell properties tab these properties pertain to the entire cell, no matter how many components are in the cell and no matter what properties each control has defined property description cell layout how the cell is laid out horizontal pads left and right cell borders vertical pads top and bottom of cell cell vertical alignment how the contents align in the cell column span by default, each column is only one column wide however, you can define a cell to span across multiple columns this is useful when designing forms with merged cells enter the number value here margins overrides the default margins for the form enter the number of pixels for each cell to have the order is top, right, bottom, left, or click the down arrow to enter the values in the diagram row span by default, each row is only one row high however, you can define a cell to span down multiple rows enter the number value here section break makes this cell a section break style defines a style style rule applies an expression to this style you can define what existing style (bold, header, etc ) to apply to a control based on a condition see example showing fields in different colors based on value docid\ y0pcshd7iy1lu7aqzcdfv for an example on how this could work edit the properties of the component using the control properties tab in the left panel the control properties listed depend on the component you are working with the properties are listed in alphabetical order property description control type the type of control depends on the component attachments cancel button check box color bar indicator image label list link field when you customize an existing grid, the system displays the new grid name in the control properties section this feature is applicable for all business objects except frs compositecontract contact object matching control read only text field related objects list text field ui command button url button custom mask custom masks are useful for fields requiring a specific value format, such as a phone number, percentage value or serial number this control becomes available if you select custom from the edit mask field enter a custom expression using the following characters u upper case characters only a alphanumeric characters only l lower case characters only 9 numeric characters only for example, an issn (international standard serial number, a unique eight digit number used to identify a print or electronic periodical publication) is formatted as an eight digit number, separated by a hyphen into two four digit numbers by using a custom mask of 9999 9999 , the required format is displayed, and invalid characters cannot be entered this type of edit mask permits entering less than the required number of characters as placeholders for example, you can enter five or less digits as characters for a custom mask of 999 99 disable uploading the default upload state for the uploader control editable specifies if you can edit the control edit mask specifies an expression that forces the user to enter a specific character set custom mask a custom mask ip address 999 999 999 999 mac address aaaaaaaaaaaa none no mask us phone (999)999 9999 zip code aaaaa when using an edit mask, a placeholder is displayed in the form for each character in the expression using an edit mask also prevents the entry of invalid characters extension field the extension of the file to upload to the knowledge base field name contains the name of the associated business object field file name field the name of the file to upload to the knowledge base height the control height in ems label the text to appear on the field or control label label expression an expression to apply to this label, if needed for example, on the knowledgeselfservice form, the following expression has been added to the details cells $(("article id " + knowledgenumber)) this adds the label article id to the label and the knowledge base number assigned to this record label pos the label position label style rule an expression to apply to this label, if needed for example, on the knowledgeselfservice form, the following expression has been added to the details cells $(("article id " + knowledgenumber)) this adds the label article id to the label and the knowledge base number assigned to this record list name the name of the embedded list to display in the form list relation the name of the business object relationship associated with the embedded list max rows defines the maximum number of rows to be displayed in an embedded list (embedded in the form) this limits the number of records displayed, superseding the values created in the list editor name of relationship with parent optional applies to schedules owner expression an expression associated with the owner of a software installation package expression an expression associated with software package installed read only expression an expression associated with this read only state for example, you can set a field to be displayed as read only when its status changes read only rule the read only status of the component required expression an expression is required in this field required rule marks this field as required searchable you can search for the name or item in this field size in kb or mb used with attachments style a display style for this control default default settings for the label and cell in accordance with the theme black combo box adds a combo box with a black background makes the label bold blue text makes field entries blue bold highlighted makes field entries bold bold label makes the label bold bold w/horizontal rule makes field entries bold and underlined counter sets the cell as a counter when a new record is added, the application increments the counter by 1 header applies larger text style to label for use as a form heading highlighted row enhances the cell with a highlight color horizontal rule adds a horizontal rule to a cell uses rules to organize sets of fields and controls horizontal rule header sets the label against a shaded background light blue text makes field entries light blue light blue text right makes field entries light blue and right aligns them when displayed in the field link (button) provides custom styling for a link button panel body creates a body section in a panel form component panel body (first row) creates a body section as the top row in a panel form component panel body (no border) creates a body section with no border in a panel form component panel footer creates a footer in a panel form component panel header creates the heading in a panel, which can serve as a component in a complex form red label makes field labels red right label sets the label flush right against the field therm labels bottom provides custom styling for the bottom portion of an escalation thermometer therm labels top provides custom styling for the top portion of an escalation thermometer vertical rule adds a vertical rule to a cell vertical rule (long) adds a vertical rule to a cell, with the top of the rule running into the cell padding vip provides custom styling for a vip cell yellowbox highlights the label in a yellow color smallgreyfont sets label font in small grey color redrightlabel sets label font in red color and aligns to the right redlabel sets label font in red color redheaderlabel sets label font size big and in red color suitable for header redbox highlights label in red color purchaseitemsnotlinkedtosku highlights the purchase items not linked to stock keeping items label in yellow color integrationstatusrunning highlights integration of status running label in yellow color integrationstatuscompleted highlights integration of status completed label in green color integrationstatusaborting highlights integration of status aborting label in orange color incidentslathirdescalation highlights incident sla third escalation label in yellow color incidentescalationbreach highlights incident escalation breach label in red color highlightunlicensedproductscompanywide highlights unlicensed products company wide label in yellow color highlightunlicensedproducts highlights unlicensed products label in red color heights80px sets label height at 80 pixel heights50px sets label height at 50 pixel heights200px sets label height at 200 pixel greenlabel sets label font in green color greenbox highlights label in green color darkbluebackgroundsectionheader highlights the section header in dark blue color darkbluebackgroundrightlabel highlights label in dark blue color and aligns to right darkbluebackgroundheader highlights the header in dark blue color darkbluebackground highlights label in dark blue color closedprojectitem sets the closed project item label font in green color bluelabel highlights label in blue color see about using expressions in styles docid\ ellmerq8evcxvioqlgh32 for information about these controls style rule an expression to be applied to this style, if needed you can define what existing style (bold, header, etc ) to apply to a control based on a condition tab index the tab order of the field see about the tab order on a form docid 2rpye0 ysfocnb79zq8ma url url that this control calls use like expression for autocomplete true or false for service level agreement links use timezone control true or false for schedules visible expression accepts the expression $(true) to make the expression control visible, or $(false) to hide it from the user width the control width (ems) to add a cell, select a cell on the form, then do one of the following from the toolbar go to commands > insert then choose a command select a command from the top of the form add top row inserts a blank row at the top of the form add bottom row inserts a blank row at the bottom of the form insert row above inserts a blank row above the selected row insert row below inserts a blank row below the selected row insert left column inserts a column to the left of the selected column insert right column inserts a column to the right of the selected column delete item deletes the selected item merge cells combines the selected cells into a single cell click the open icon to open the form editor commands window, then click a command delete control deletes the selected control merge cells combines the selected cells into a single cell add row at the end inserts a blank row at the bottom of the form insert row above selection inserts a blank row above the selected row insert row below selection inserts a blank row below the selected row delete row deletes the selected row and its contents insert column to right inserts a column to the right of the selected column insert column to left inserts a column to the left of the selected column delete column deletes the selected column show tab order apply left to right tab order apply top to bottom tab order clear let browser decide complete index assignments another empty cell appears repeat for more cells, using the appropriate commands for your form for example, to modify the vertical alignment of a cell, next to cell vertical alignment , choose an alignment setting from the drop down list you can manipulate these styles to add powerful structure and design elements to the form examples include adding buttons to initiate an action defining control actions when selected or manipulated (for example, run a report) defining control behaviors (for example, contents or lack of content, use of a pick list, accompanying tool tips) adding a free floating label to identify a control or other item formatting the appearance of a control by adding styles adjusting control size and alignment click save frequently saving your changes is recommended as you construct the form supported form controls for responsive business object form the list of supported form controls for responsive business object form of of self service mobile role is given below the ones that are not supported will not align and fit to displayed appropriately in mobile devices control name supported control properties check box field name label label expression read only rule required rule visible expression read only text field field name label label expression read only rule required rule visible expression text field field name height label label expression read only rule required rule visible expression text field (optional) field name label label expression read only rule required rule visible expression email field name label label expression read only rule required rule radio button field name label label expression read only rule required rule number field name label label expression read only rule required rule date and time picker field name label label expression read only rule required rule attachments ui command button label label expression label label label expression related objects list label label expression response target
