Lesson 5 - Plugins: views, tabs and dialogs

The user interface of plugins consists of different types of views and dialogs.

Depending the information displayed in the views you have a few types of views:

• Simple view - displays information of a single object
• Single list view - displays a list of objects
• Double list view - contains to lists of objects where the lower list shows objects related to the selected object from the upper list

Views can also consist of tabs and dialogs can be opened for different purposes.

Begin by reading more about these graphical components: Views, tabs and dialogs

Creating views

Start by reading the topics on how to create the different types of views:

• How to create a simple view
• How to create a single list view
• How to create a double list view

Exercise 1

Task:

Create a view that displays all customers. Select a few properties of the customer to display in the list, at least the customer Id and first name.

Results:

You should chose to create a single list view and you need to use the data providers to get the list of all Customers.

Have a look at what information is included in the customer object and display a selection of information in your list columns.

Can you add sorting to your columns?

Creating dialogs

Now read how to create dialog.

Exercise 2

Task:

Add the possibility opening a dialog for a single customer by selecting it from your list view from exercise 1.

In the dialog create fields to display minimum information about the customer, such as customer Id and first name.

The customer Id should not be editable but make sure you save changes to the first name if it has been changed.

Results:

You can open a dialog from your list view which displays the selected customer Id and first name and you can edit the first name of the customer and when you press OK the dialog closes and the list view is updated with the new first name if it has been changed.

Creating tabs and views and dialogs that can display tabs

Plugins can add a tab to a view or a dialog from another plugin. This enables you to add properties to objects such as the items and customers and add the configuration of these properties to the customer/item view without changing standard LS One plugins. All your configuration would be contained in this tab.

1. First you learn how to create a tab
2. Next you need to learn how to create a view that contains tabs. An exa mple of such a view is the item view.
3. You can also add tabs to dialogs. An example of such a dialog is the New item dialog. Learn how to create a dialog with tabs.

Exercise 3

Task:

In your training plugin add a tab to the item view. This view does not have to display any information at this point.

Results:

When you open the item view for any item you should see your tab in the list of all tabs.