Difference between revisions of "Property Direct Edit (Client)"

Revision as of 10:38, 27 January 2022

Overview

Property direct editing (also known as inline editing) aims to provide a more efficient way for users to edit properties, especially when such tasks are performed frequently.

Generally speaking, direct editing skips the additional dialogs or pages presented in regular editing and allows users to directly interact with the UI displaying properties. For example, a text box type of control can be used to both display the value of a property and accept modifications of the value from the user.

Supported property types

In UBIK^®, we provide default templates for some most frequently used property types. However, you can use your own templates, controls, etc. as you like to deal with these property types or even more (as long as you can find suitable UI controls for dealing with these types).

For Properties:

• String/Text: named as UBIKPropertyDirectItemString.
• Integer: named as UBIKPropertyDirectItemInt.
• Double: named as UBIKPropertyDirectItemDouble.
• Boolean: named as UBIKPropertyDirectItemBool.
• Guid: named as UBIKPropertyDirectItemGuid.
• DateTime: named as UBIKPropertyDirectItemDateTime.
• GeoData: named as UBIKPropertyDirectItemGeoData.
• With selective list items: named as UBIKPropertyDirectItemList.

For MRO-Tasks:

• String/Text: named as UBIKTaskPropertyString.
• Integer: named as UBIKTaskPropertyInt.
• Double: named as UBIKTaskPropertyDouble.
• Boolean: named as UBIKTaskPropertyBool.
• Guid: named as UBIKTaskPropertyGuid.
• DateTime: named as UBIKTaskPropertyDateTime.
• GeoData: named as UBIKTaskPropertyGeoData.
• With selective list items: named as UBIKTaskPropertyList.

PropertyViewModel

This is the view model for every single UBIK^® property and also the basement for property direct editing (and regular editing alike). For example, a certain named PropertyViewModel (with the name of PROPERTY_NAME) of the context object in a content page is accessible as {Binding Properties.VisibleItems[PROPERTY_NAME]}.

A test template for direct editing a String property (Xamarin)

The same template now in edit mode (Xamarin)

In the example demonstrated in the screenshot where a test template is used to enable direct editing of a String/Text typed property, the following members of the PropertyViewModel are involved.

• InEditing: This is the boolean member indicating whether the PropertyViewModel is currently in edit mode. It can be used to decide whether the UI should display the DisplayValue text or present a text box for user input;
• Description: This is the description of the underlying property/meta property;
• ValueItem.PropertyValue: This is the value of property stored at the PropertyViewModel which can differ from the underlying property value because there can be editing changes not yet confirmed/saved. It can be read from and written to by the text box;
• DisplayValue: This is the textual version of ValueItem.PropertyValue used for displaying when the InEditing is false;
• StartDirectEditCommand: Sets InEdit to true and starts the direct editing session. In the example, this is linked to the tapped event of the entire template area;
• ConfirmEditCommand: Confirms the edit and sets InEdit to false. Even if the property value is not changed, this will give the property a new validation timestamp, technically modifying the property;
• SaveAndCommitCommand: In addition to confirming the edit, this also saves the changes to the underlying property, saves the owner object and attempts to commit it if the sync mode allows;
• ResetCommand: Resets the underlying property to its last known server state, saves the owner object and attempts to commit it if the sync mode allows;
• DiscardChangeCommand: Discards all changes made at the PropertyViewModel level that not yet saved to the underlying property;
• DeleteValueCommand: Sets the underlying property's value(s) to null and erases its validation timestamp, saves the owner object and attempts to commit it if the sync mode allows;
• CancelEditCommand: Cancels the current editing session and discards all changes made at the PropertyViewModel level in that session (different from DiscardChangeCommand).

Once again, you can use the Developer Mode to find out more about the PropertyViewModel, like where they are available and how they can be accessed in XAML, or what other members are available underneath, etc.

Relevant types

Here are some types created for the purpose of property direct editing.

PropertyDirectItemTemplateSelector

This is used in a ListView-like control where item templates should be specified, in this case property item templates specifically. It determines the different DataTemplates to be used for direct editing PropertyViewModels according to their property types. For types that have default UBIK^® direct editing support, the template names follow the pattern of "UBIKPropertyDirectItemXXX" where XXX is the type name, e.g. String, DateTime, List, etc.

For types that do not come with default direct editing support, the selector uses the "UBIKPropertyItem" template in which editor dialogs are shown instead.

TaskPropertyTemplateSelector

By default, MRO tasks have direct editing enabled for their task related properties in the "UBIKTaskItem" template. This template selector determines the different DataTemplates to be used for direct editing PropertyViewModels according to their property types. For types that have default UBIK^® direct editing support, the template names follow the pattern of "UBIKTaskPropertyXXX" where XXX is the type name, e.g. String, DateTime, List, etc.

For types that do not come with default direct editing support, the selector uses the "UBIKTaskProperty" template in which editor dialogs are shown instead.

ComboBoxItemTemplateSelector (UWP only)

By default, a ComboBox uses the same template for the selected item (when closed) as well as the drop down items (when opened), which is not always wanted. This template selector allows you to use different templates for these two types of items.

Namespace xmlns:tpl="using:UBIK.WinX.Templates"

• DropDownItemTemplate: for the dop down items (when opened)
• ComboBoxSectionItemTemplate: for the selected item (when closed)

Behaviors and controls