Skip to end of metadata
Go to start of metadata

This page discusses how you can easily embed list view in a form builder and utilize it as a multiple selection input. Introduced in Crosslight 3, list view editor provides several functions such as data list display, single selection input, multiple selection input, and navigation. If you are new to form builder, please check out Form Builder Overview.

On this page:

Preparing Form Metadata

In order to use the form builder, first you need to create a form metadata that are based on a particular model class. To get more insight about form metadata, you can refer to Understanding Form Metadata.

Consider that you have a domain model class for Product such as shown below.

Categories is the datasource which will be bound to ListView editor and Note contains the information about the current selection.

Let's create a form definition for the Product class, create a new class called ProductFormMetadata.cs with the metadata definition shown below.

ProductFormMetadata.cs

From the above metadata, you can see that the property is decorated with ListViewAttribute and marked as a selection input through the InteractionMode property. The property also need to be decorated with SelectionInputAttribute to enable multiple selection behaviour. And not to be missed, the selected categories is set to bound to the SelectedCategories property in ViewModel.

In addition to selection input, you can also use list view editor for simple data presentation which is particularly useful when you need to display multiple list of an entity in a single form, for instance, showing roles and branches of a user. Furthermore, the list view supports navigation interaction mode which is useful to show detail about a particular item.

Preparing ViewModel

Once you have created the form metadata class for a model, the next step is to create a ViewModel class that provides user interaction logic for editing-related tasks. Derive your view model from EditorViewModelBase(T) Class. You also need to specify the form metadata type directly in the editor view model. Some additional logic is added to invalidate information of the current selection. See the following example.

ProductEditorViewModel.cs

Preparing View for iOS

In iOS, UIFormViewController will be used to simplify the form construction. You only need to specify the previously created view model in there and you will get the form builder running perfectly in iOS. For complete explanation, you can refer to Understanding iOS Form Builder.

PersonEditorViewController.cs

The results can be seen in the following image.

Preparing View for Android

In Android, FormActivity will be used to simplify the form construction. You only need to specify the previously created view model in there and you will get the form builder running perfectly in Android. For complete explanation, you can refer to Understanding Android Form Builder.

PersonEditorActivity.cs

The results can be seen in the following image.