Customising a view (new item UI)

This page focuses on the product’s detail view and explains the basic concept of use. You’ll learn how to customise the product view so that it only includes the data fields that are relevant for your company.

Do you have admin rights?

Only admin users can create and edit views. If you are not an admin:

  1. Turn to someone with admin rights.

  2. Ask them to create the necessary views and assign them to your user account.

1. Creating a new view

  1. Click on the list of views ().

  2. Click on Create new preset …​.

  3. Enter a name.

  4. Click on Create view.
    → The new view is created and opens automatically, i.e. it is applied. It’s now possible to switch between different views.

details new view

2. Creating a grid

  1. Click on Edit view ().

  2. Add rows and columns to create a grid.

    1. Click on and then on Add row.

    2. Click on Add column ().

    3. Drag the columns to make them larger or smaller.

details create grid

3. Placing elements

  1. Add elements via drag & drop.

  2. Click on and edit the element’s settings.

    1. Change the name.

    2. Decide which data fields the element should contain.

    3. Use drag & drop to arrange the data fields in a specific order.

  3. Click on

details elements
Symbol Explanation

Leads down one level.

delete

Deletes the element.

Leads up one level.
Can I add elements multiple times?

The number in the grey circle indicates how many times you can use the element.

  • Most elements can only be added once.

  • The element Custom portlet can be added any number of times. However, the individual data fields within the portlet can not be added multiple times. Further information can be found in an example of use.

4. Toolbar

The toolbars are customisable in the item and variation views. In other words, you can decide which information and buttons they should include.

  1. Click on in the upper right corner. This opens the editing mode.

  2. Add the element Toolbar via drag & drop. Position it at the top of the view.

  3. Move your cursor over the element Toolbar and click on to access the settings.

  4. Add the buttons and information that should appear in the toolbar.
    Tip: The save button and the product information can be configured even further (). See the table.

  5. Save () the view.

Setting Explanation

Save

By default, when users click on the save button, a pop-up window appears, where they have to confirm their changes. You can deactivate the pop-up window if you want the changes to be saved directly, i.e. without additional confirmation.

  1. Open the editing mode () and navigate to the save button’s settings ().

  2. Find the setting Show changes before saving.

    = Users have to confirm their changes.

    = Users do not have to confirm their changes.

  3. Save () the view.

Information

You can decide which information should be displayed in the toolbar.

  1. Open the editing mode () and navigate to the information element’s settings ().

  2. Activate the information () that should be displayed in the toolbar.

  3. Save () the view.

5. Custom portlets

The custom portlet differs from pre-configured portlets in two important ways. The custom portlet:

  • can be added any number of times.

  • includes all of the data fields and not just a subset, as is the case with pre-configured portlets.

Thanks to custom portlets, you are not limited to the pre-defined settings. Rather, you can decide which exact settings a portlet should include.

Example: Imagine you’re not satisfied with how the global settings are arranged by default. You would rather have separate groups for the manufacturer settings and the conditions. Such a scenario can be accomplished with custom portlets.

  1. Add any number of custom portlets.

  2. Give the portlets meaningful names.

  3. Add the appropriate item data fields to the portlets.

details custom portlets

6. Custom texts, colours and mandatory fields

It’s possible to customise the design of an entire element or the design of a single data field.

Element level

You can customise the element level in the following ways:

details level element
Setting Explanation

Name

Gives the element a custom name. This is useful, e.g. if you work with custom portlets or if the pre-defined name is not specific enough.

Custom text

Adds body text or a heading to the element.

  • p = Stands for paragraph. Select this option if you want to add body text.

  • h1 - h6 = Stands for heading. Heading 1 is the largest and heading 6 is the smallest.

Custom note

Adds a colourful note to the element.
Data field level

You can customise the data field level in the following ways:

details level datafield
Setting Explanation

Element name

Gives the data field a custom name. This is useful, e.g. if the pre-defined name is not specific enough.

Show hint

Adds a note to the data field. The text is displayed underneath the data field and in a smaller font.

Required

Turns the data field into a mandatory field. This means that:

  • the data field is given an asterisk.

  • the data field is underlined in red if it is empty.

  • it will not be possible to save the data field without any content.

This is useful, e.g. if you want to require your employees to enter certain pieces of information.

Disabled

Modifies the data field so that it can no longer be edited. This is useful, e.g. if your employees should be able to see certain pieces of information, but not edit them.

7. Custom table headers, sorting and expanding/collapsing

Table headers

Some elements can be customised. For example, you can decide which columns should be displayed in a table.

  1. Click on in the upper right corner. This opens the editing mode.

  2. Move your mouse cursor over an element and click on to open the settings.

  3. Open the drop-down list Table columns and select the columns () that should be displayed in the table.

  4. Save () the view.

Default sorting

Some elements can be customised. For example, you can decide how the information in a table should be sorted, e.g. in alphabetical order.

  1. Click on in the upper right corner. This opens the editing mode.

  2. Move your mouse cursor over an element and click on to open the settings.

  3. Decide how the columns should be sorted by default.

  4. Save () the view.

Displayed settings may vary

The table includes further information about an element’s sorting settings. Depending on which element you open, the displayed sorting settings may vary slightly.
Setting Explanation

Always show new links on top

Select this option () if you want newly linked data to initially appear in the first line of the table. This emphasizes the new data. Once you have saved the changes to the variation, the data will be sorted into the correct position within the table.

Table sorting settings

This setting controls the order in which the data is displayed in the table.

  1. Sort by: Select the criteria for sorting.

  2. Sort order: Select ascending or descending order.

Picker sorting settings

This setting controls the order in which the data is displayed when linking.

Example - Sales prices: When you open a variation and click on Add sales prices (), then this setting controls the order in which the sales prices are displayed in the drop-down list.

  1. Sort by: Select the criteria for sorting.

  2. Sort order: Select ascending or descending order.
Expanding or collapsing elements by default

Some elements can be customised. For example, you can decide which elements should be expanded or collapsed by default.

  1. Click on in the upper right corner. This opens the editing mode.

  2. Move your mouse cursor over an element and click on to open the settings.

  3. Activate or deactivate the option Expanded. This option controls whether the element should be expanded or collapsed by default.

  4. Save () the view.

8. Finalising your work

  1. Save the view () and close the editing mode ().

  2. Check the result in the main window.

  3. If necessary:

    1. Click on Edit view () again and edit the view even further.

    2. Allow other users to see the view.

finish editing

8.1. Functions in the editing mode

Symbol Explanation

undo

Undoes the last change, unless this change has already been saved.

redo

Restores the previously undone change.

A list of views. You see the name of whichever view is currently open. Click on to switch to a different view or create a new view.

Resets the view to the state that was last saved.

Saves the changes made to the view.

Closes the editing mode. In case of unsaved changes, a dialogue is displayed.

8.2. Granting rights

Which user roles should be allowed to see the view? You can grant or limit access to every single view.

  1. Click on Edit view ().

  2. Click on Rights management.
    → The menu Setup » Account management » Roles opens in a new tab.

  3. Search for () and open the appropriate user role.

  4. Click on Role-defined views.

  5. Expand the entries () and select the views () that the user role should have access to.

  6. Save () the settings.

Further information about user accounts and access rights.

9. Practical examples

Properties

The properties element can be added any number of times. One possible application is displaying every type of property as a separate portlet.

  1. Add the elements Properties and Text properties as many times as needed.

  2. Open the portlet’s settings ().

  3. Customise the settings as needed.

  4. Save () the view.

Setting Explanation

Name

Give the portlet a meaningful name.

Table columns

Decide which information should be displayed.

Types

Decide which property types the portlet should include.

1. Language;
2. Language

Only for text properties. Decide which language should be displayed on the left and right side.
Texts

By default, the text area is a bilingual view with German and English. However, you can modify the area if you need different languages or if you want them to be displayed in a different order. For example, you could create a monolingual view. Or you could choose different languages and thus create a customised translation view.

  1. Add the element Translations panel as many times as needed.

  2. Open the portlet’s settings ().

  3. Click on Configure languages.

  4. Which languages should be displayed together? Select one or more languages ().

  5. Which language should be displayed first, second, third, etc?

    1. Move your cursor over a language with the symbol drag_indicator.
      → Your mouse cursor changes shape ().

    2. Drag the language to the appropriate position.

  6. Save () the view.

Imagine your product texts are translated from English into German, French, Spanish and Italian. The view would be very cluttered if you displayed all of the languages together. Instead, only select the first language pair, e.g. English and German. Then add the translation panel a second time and select the next language pair, e.g. English and French. Repeat the process as many times as necessary. The translation panels are displayed one underneath the other. They can be expanded or collapsed as needed ().
Optional item filters

Some filter in the Item » Item menu are deactivated by default and not shown in the default view. You can activate these filters in your own view. Proceed as follows to activate optional filters:

  1. Open the Item » Item menu.

  2. Select the view you want to avtivate the filters for or create a new view.

  3. Click on Edit view ().
    → The editing mode opens.

  4. Hover with your mouse on the element in the middle that represent the table of search results.

  5. Click on Edit (edit) in the top right corner of the element.
    → The Filter area opens on the side.

  6. Scrolle down in the Filter area.

  7. Select the filters you want to be visible in the view of the Item » Item menu.

  8. Save (save) your settings.

10. FAQ

I don’t see a drop-down list with views in the upper right corner. Why not?

Have you already opened an item data record? The drop-down list with views (default view and custom views) is not visible in the overview. It only appears once you have opened an item data record.

default view
I can’t create a new view. Why not?

Do you have admin rights? Only admin users can create and edit views. If you are not an admin:

  1. Turn to someone with admin rights.

  2. Ask them to create the necessary views and assign them to your user account.

The view is empty. What am I doing wrong?

Have you already created a view? The view controls which product information is displayed and how this information is arranged. In other words, you can design your item and variation pages however is most convenient for you. If you haven’t created a view yet or if the view is empty, then you won’t see any information.

Can I add elements multiple times via drag & drop?

The number in the grey circle indicates how many times you can use an element.

  • Most elements can only be added once.

  • The element Custom portlet can be added any number of times. However, the individual data fields within the portlet can not be added multiple times. Further information can be found in an example of use.

Can I import and export the views?

Not yet. An import/export function is planned for the future. However, we cannot yet estimate when it will be available.