System Setup & Administration:

UI Configuration Templates
SAP Business One
Version 10.0

PUBLIC

In this topic you will see how to simplify the predefined forms in SAP
Business One.

1
 Objectives

At the end of this topic, you will be able to:

▪ Edit and simplify the layout of standard documents and forms
▪ Assign the edited documents and forms to multiple users by means of a
UI configuration template
▪ Explain how to manage multiple UI configuration templates
▪ Describe how the UI Elements tab in the form settings window works

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 2

▪ After completing this topic, you will be able to:

▪ Edit the layout of standard SAP Business One documents and forms
▪ Assign the edited documents and forms to users in a UI Configuration template
▪ Explain how to manage multiple UI configuration templates
▪ Describe how the UI Elements tab in the form settings window works
 Business Example

To improve the efficiency of service calls, customer support staff

need to quickly scan key information in documents and master
data.

They need a simplified version of the standard forms, with fields

that are not relevant removed, fields that are service-related on
the same tab, and user-defined fields easily accessible.

This requirement can be easily implemented using a

UI configuration template that contains the set of
simplified forms.

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 3

▪ Service is paramount to OEC Computers. To improve the efficiency of service calls, customer
support staff must be able to quickly scan key information in documents and master data. They
need a simplified version of the standard forms, with fields that are service-related consolidated
together on the same tab, with unused fields removed from the form, and with user-defined fields
easily accessible. Users need a user interface that is streamlined and easy to work with.

▪ Standard forms can be easily simplified to meet the needs of a group of users. These edited forms
are grouped into UI configuration templates which can be assigned to end users according to their
role.

3
 Simplifying Forms

Hide or
deactivate
unwanted Move user-
fields defined fields

Move fields from

tab to main part
of form

Move fields or
buttons to more
convenient part of
form

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 4

Instead of working with the standard forms, you can make them fit your requirements by hiding or
deactivating unused fields, moving fields or buttons to a more convenient part of the form, moving
fields from another tab onto the main tab for ease of access, and moving user-defined fields from the
side window.

4
 UI Configuration Templates

▪ The first part of this topic explains the purpose of a UI configuration template.

5
 Authorizations for UI Changes

To edit a form for personal use, user needs general authorization:

 General Edit Form UI
To modify forms for other users, user needs general authorization:
 Administration Utilities  UI Configuration Template

Requirement Menu Path Authorization

Edit a form for Tools > Edit Form UI General  Edit Form UI
personal use

Edit forms for others in Administration > Utilities > Administration Utilities 
a UI template UI Configuration Template UI Configuration Template

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 6

▪ Authorized users can edit and modify forms for personal use using the Edit Form UI tool. The tools
menu will become active when the user opens an eligible form. The authorization required for
editing a form is found under the General subject area in the general authorizations window.
▪ Authorized users are able to modify forms for other users by creating a UI configuration template.
The required general authorization is found under the Administration > Utilities subject area in the
general authorizations.

6
 UI Configuration Template
Administration > Utilities > UI Configuration Template

▪ UI configuration template is a
collection of forms edited for needs
of end users
▪ To create a new template, open the
UI Configuration Template window
and select Data > Add
List of edited
forms for a group
of users

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 7

▪ A UI configuration template is a collection of forms that have been simplified and/or modified to
meet the common needs of a set of end users. In SAP Business One all forms and documents can
be modified.
▪ To create a UI configuration template, choose the menu path shown in the slide, then choose Data
> Add from the menu bar.

7
 Adding Forms

▪ Individual forms are selected

from dropdown list and then
edited to meet user
requirements
▪ Additional UI templates can
be created for different sets
of users
Note: Some edit functionality
Select forms to go overlaps with form settings.
into template Users can still make further
changes to their own forms
using form settings

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 8

▪ The individual forms are selected from a dropdown list on the Forms tab, and then individually
edited.
▪ Additional UI templates can be created for different sets of end users.
▪ Note: Some of the edit functionality, such as hiding fields, can also be achieved using form settings.
Users can still make further changes to a form for personal use using form settings.

8
 Edit UI Mode
▪ Select a form and choose the Edit Form UI button
▪ In edit mode the form has a distinctive black title
area
▪ Clicked field is highlighted for editing

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 9

To edit a form, select the row for the form in the template then choose the Edit Form UI button. Note
that this button does not become active until you select a form.
When you press the Edit Form UI button you enter edit mode. The form has a distinctive black title
area. The title of the form changes to include the text “UI Edit Mode”.
Now you are ready to make design changes!
When you click on a field it is immediately highlighted and you can perform an action on the field such
as hiding it or moving it.

9
 Assigning Users to the UI Template

▪ Users can be
assigned to the UI
template individually
or by user group
▪ After the assignment,
the modified forms
will automatically
open instead of the
standard forms when
the assigned user
next logs in

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 10

▪ After the set of forms has been edited, the UI configuration template is assigned to users:
▪ Individually by name on the Assigned Users tab
▪ As a user group on the Assigned Groups tab. The user group must be of type UI Configuration
Templates or Cross All Types. See the companion course Users and User Groups for more
information on user groups.

▪ These modified forms will automatically open instead of the standard forms when the assigned user
next logs in.

10
 Making the Changes

▪ In this section we show you how to edit and simplify forms.

11
 Hide and Disable Fields

In UI Edit mode, select a field or

multiple fields, and open the
context menu to see edit options:
• Hide: removes the field and
description from the form
• Disable: an editable field
becomes gray and cannot be
changed by the user

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 12

▪ In edit mode, you can select a single field or multiple fields, and open the context menu by right-
mouse clicking.
▪ If the field is editable, the context menu will allow you to hide or disable the selected field or fields.
When you hide a field a space is left in the form. When you disable a field it becomes gray and
cannot be changed by the user.

▪ If the field is inactive, (displayed in gray), the context menu will only allow you to hide the field.
▪ In the example the business partner master data form is shown, however, the same editing rules
apply to all eligible forms.

12
 Using Drag and Drop

▪ Make use of white space in the

form by moving fields to a more
convenient position
▪ To move a field, select field and
drag to new position
▪ Can move field from a tab to form
header, or from one tab to a
different tab

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 13

▪ You can make use of the white space in a form to move fields to a more convenient position.
▪ You can move fields by selecting the fields and dragging and dropping them into position.
▪ You can move a field from a tab onto the main header of the form.

▪ You can also move a field from one tab to a different tab by parking it temporarily in the header area
before you switch to the target tab.

13
 Aligning Fields

To align moved fields to existing fields, select

the fields then choose Align from the context
menu

Fields
aligned left

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 14

▪ After you have moved fields, you can align them to existing fields by choosing Align from the context
menu.
▪ To align fields with an existing field, select the existing field in addition to the moved fields, then
choose left or right.
▪ To close up any spaces, select an existing field in addition to the moved fields, then choose top or
bottom.

14
 Moving User-Defined Fields

To move a user-defined field (UDF)

from the side window to the main
form area:
▪ Select and hold your mouse
on the field until a black
border appears (1)
1
▪ Drag the black rectangle to
the main area (2)
▪ Move into position and
release (3)
2

3
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 15

▪ A key advantage of editing a form is to move user-defined fields from the side window to the main
header of the form or to a tab within the form. This is especially useful for UDFs added to marketing
documents. Since you edit each document type separately, you can move user-defined fields
relevant only for that document type without the need to use UDF categories in the side window.
▪ Only one UDF field can be moved at a time. To move a UDF:
▪ Select the field, not the label, and hold with your mouse until a black border appears (see
screenshot 1).
▪ Drag the field to the main form (see screenshot 2).
▪ Position the UDF on the main form (see screenshot 3).

15
 Save and Restore Default

After you have made the editing

changes, click anywhere in the
form white space and open the
context menu to:
• Save: commits the changes
• Restore Default: backs out all
changes and restores fields to
the original out-of-box format

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 16

▪ After you have made the changes, you need to save them. Click anywhere in the form white space
and open the context menu. Choose Save to commit the changes. If you close the UI Edit window
without saving you will lose the changes.

▪ The Restore Default option on the context menu acts as an “undo” button. So if you have hidden a
field, it will be restored on the form in the original position.
▪ Be aware that the action of restoring defaults changes all fields in the form back to the original out-
of-box format. Even if you have saved and closed the UI template, when you restore the form it will
be set back to the original settings. Tip: If you decide to change an already heavily-modified
document that is in use by several users, first make a copy of the UI template. This gives you the
ability to restore the document, if necessary, from the copy, instead of having to restore it to the
original settings.

16
 Adding Tabs

Select Add Tab from the white space context menu to add a new tab to a form

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 17

▪ If the form or document contains tabs, you can add a new tab. Select the option from the context
menu. You can move existing fields to the new tab, including user-defined fields.

17
 Form Settings in UI Edit Mode
▪ When you open form settings in UI Edit Mode, UI Elements tab
lists every header field, and every field on each tab
▪ You can hide and disable fields by deselecting Visible and
Active checkboxes (equivalent to context menu hide and
disable)

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 18

▪ In UI Edit Mode, when you open the form settings window you will see an additional tab called UI
Elements. This tab shows every field shown on the header and each tab of the document, and you
can hide and disable fields from this window using the Visible and Active columns. This is
equivalent to hiding and disabling fields using the context menu.

▪ Note that the UI Elements tab only appears when form settings is opened from a form in UI Edit
Mode. End users never see the UI Elements tab.

18
 Hiding a Tab using Form Settings

▪ Option to hide tab by making the tab entry invisible in

the UI Elements

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 19

▪ You can also hide an entire tab by making the tab entry invisible in the UI Elements tab.

▪ In the example, we want to hide the Planning Data and Properties tabs from the item master data
since they are not used in the company. In the form settings we deselect the relevant checkboxes
for the Planning Data and Properties tabs. As a result the tabs no longer appear in the item master
data form.

▪ The Header and General tabs in master data forms are grayed out in the form settings and cannot
be hidden. In marketing documents the Contents tab cannot be hidden.

19
 Summary

UI Edit UI Elements Form

Mode tab Settings
Move a field (drag and drop) 
Move a field to another tab 
Move a user-defined field to 
main form
Align and compact fields 
Hide a field   
Disable a field   
Add a tab 
Hide a tab 
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 20

▪ The slide shows a comparison of the edit actions that can be done using UI Edit Mode, the form
settings window using the UI Elements tab, and the standard form settings window.
▪ Note that the standard form settings window is only available for certain forms, such as marketing
documents.

20
 Managing UI Configuration Templates

▪ The next part of this topic looks at how you can manage UI configuration templates.

21
 Copying Edited Forms to Other UI Templates

Multiple UI configuration templates can

be created and assigned to different
sets of users
To save time, you can copy edited
forms from one UI template to another
UI template. Select one or more forms
and choose Copy To button

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 22

▪ Often there is a need to create multiple UI configuration templates and assign to different sets of
users.
▪ Once you have made the changes to a form in one UI configuration template, you can copy the
changes to another UI configuration template.

▪ To do this, select the rows for the forms you want to copy, choose the Copy To button, and select
the target UI template.

22
 Default UI Template
▪ Option to designate a default UI configuration template in
General Settings
▪ Default template will apply to all new users and to existing
users who are not assigned to any other UI template
▪ If a user is later assigned to a different UI template, the new UI
template will take precedence over the default UI template
▪ Example: A new UI template Sales group 2 is created. What
will happen when this is set as a default template?

Result:
Already assigned
to Sales group 1 Still assigned to sales group 1
UI template template

Not assigned to
Assigned to sales group 2
any UI template
template
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 23

▪ Instead of assigning a UI template to every user, you can designate a default UI template on the
Display tab of the General Settings.
▪ The default template forms will be automatically applied to all new users created after the default
template was set, and will also apply to existing users who are not currently assigned to a UI
template.
▪ If a new user is later assigned to a UI template that is not the default template, the assigned
template forms will take precedence over the default UI template.

▪ Let us examine how designating a default UI template affects existing users who may or may not
have already been assigned to a UI template.
▪ In this example, we have an existing UI template Sales group 1. We create a new UI template
Sales group 2 and set this as a default.
▪ User A, who was previously assigned by name to the Sales group 1 template, is not affected
by the default template. User A will still see the forms from the Sales group 1 template.
▪ User B, who was not assigned to any template, is affected and will now see the forms from the
Sales group 2 template.

23
User Perspective

24
 Form Settings

▪ User can show

and hide fields
using form
settings
▪ If the form is
assigned to the
user in a UI
configuration
template, the
name of the
template appears
in the form
settings window
▪ The user can still
make changes
using form
settings
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 25

Any user can show and hide fields in a marketing document form using the form settings icon (if they
have the authorization General > Document Settings).

If the user presses the form settings icon for a form that they are assigned to in a UI configuration
template, the name of the UI template appears in the form settings window. The user can still make
changes to the form.

25
 Multiple UI Templates

If user is assigned to multiple UI

templates with overlapping forms:
▪ First assigned template considered
highest priority
▪ User has option to apply a different UI
template in form settings

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 26

▪ The system allows you to assign multiple UI templates to a user. Since the templates could contain
overlapping forms, how does the system know which one to use?
▪ The first template assigned to a user is considered the highest priority.
▪ The user has the option to choose a different UI template from a dropdown list in the form settings
window, and switch to the forms in that template by choosing the Apply button.

26
 Summary

Key points from this topic:

▪ Simplifying frequently used forms and documents can increase user productivity and
reduce errors when processing forms
▪ A UI configuration template is a collection of forms that have been simplified and/or
modified to meet the needs of end users
▪ You can create different UI templates for different sets of users
▪ All forms and documents in the system can be modified
▪ Changes include: rearranging fields using drag and drop, moving fields to a new tab,
hiding and disabling fields, aligning fields, adding and removing tabs, moving user-
defined fields from the side window
▪ You can assign users to the UI template individually or from a user group
▪ In the General Settings you can set a default UI template for all new users

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 27

These are the key points from this topic:

▪ Simplifying frequently used forms and documents can increase user productivity and reduce
errors when processing forms
▪ A UI configuration template is a set of forms that have been simplified and/or modified to meet
the needs of end users
▪ You can create different UI templates for different sets of users
▪ All forms and documents in the system can be modified
▪ Changes include rearranging fields using drag and drop, moving fields to a new tab, hiding and
disabling fields, aligning fields, adding and removing tabs, moving user-defined fields from the
side window
▪ You can assign users to the UI template individually by name, or from a user group.
▪ In the General Settings you can set a default UI template to apply to all new users

27
© 2020 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company.

The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its distributors contain proprietary software components
of other software vendors. National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP or its affiliated
companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP or SAP affiliate company products and services are those that are
set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release
any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future developments, products,
and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason without notice. The
information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various
risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements,
and they should not be relied upon in making purchasing decisions.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company)
in Germany and other countries. All other product and service names mentioned are the trademarks of their respective companies.
See http://global.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.

29