Spitting more than two columns in a form
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎03-30-2016 09:01 PM
Hi there,
I tried to split multiple fields in a row by inserting |-split-| between fields in the form layout page, the layout is displayed as expected in the Form Design view but not in the actual Form view as shown in below. Any advice?
[Form Layout View]
[Form Design View]
[Form View]
- Labels:
-
User Interface (UI)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎03-30-2016 09:50 PM
Hi Chadwick,
I'm curious how you got multi column form layout on form designer. My understanding is we can have either 1 or 2 column layout.
I also checked : Form Design - ServiceNow Wiki
Thanks,
Manjul
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎03-31-2016 12:04 AM
Hi Manjul,
The splitting was not done on Form Design page but was done on the Form Layout page by inserting |-split-| option between fields. The proper use of |-split-| option is mentioned on this wiki page Enabling Multiple Form Splits - ServiceNow Wiki which splits groups of fields by sections with |- begin_split -| and |- end_split -| .
I guess it is very likely not a proper way to use the |-split-| alone to format fields into multiple columns than two, but wonder if this would be a trick to do so, as the layout can be rendered on the Form Design page, why not on the Form view as well?
Chadwick
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎03-31-2016 09:22 AM
Hi Chadwick,
I do not see any possibility to get multiple fields in a row unless you write a custom form.
The way form elements are arranged:
|-Begin Split -|
Column1 (some fields here)
|-Split -|
Column2 (some fields here)
|-End Split -|
The HTML generated for form layout is:
<div class="row">
<div class="vsplit col-sm-6">
<div class="form-group " .....>
<div class="form-group " .....>
<div class="form-group " .....>
<div class="form-group " .....>
</div>
<div class="vsplit col-sm-6">
<div class="form-group " .....>
<div class="form-group " .....>
<div class="form-group " .....>
<div class="form-group " .....>
</div>
</div>
Please refer below screenshot:
Hope it helps!
-Manjul
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎03-30-2016 09:58 PM
Hi Chadwick,
Try reducing form design column to 1.
Raj