Difference between revisions of "Property Direct Edit (Client)"
| Line 24: | Line 24: | ||
[[File:UBIK_Xamarin_UI_Template_PropertyDirectItemString_Debug_InEditing.png|thumb|The same template now in edit mode (Xamarin)]] | [[File:UBIK_Xamarin_UI_Template_PropertyDirectItemString_Debug_InEditing.png|thumb|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. | 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; | + | * '''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; | + | * '''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; | + | * '''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; | + | * '''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; | + | * '''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; | + | * '''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; | + | * '''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; | + | * '''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 and not yet saved to the underlying property; | + | * '''DiscardChangeCommand''': Discards all changes made at the PropertyViewModel level and 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; | + | * '''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 '''in that session''' (different from DiscardChangeCommand). | + | * '''CancelEditCommand''': Cancels the current editing session and discards all changes made at the PropertyViewModel '''in that session''' (different from DiscardChangeCommand). |
| − | {{Hint|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 | + | {{Hint|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 behaviors and controls === | === Relevant behaviors and controls === | ||
Revision as of 10:01, 9 July 2021
Contents
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 of 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).
UWP
They are accessible as DataTemplates from the TemplateService (use the Developer Mode to see where this is available) and the syntax in XAML is {Binding TemplateService[TEMPLATE_NAME]}. Just like other such templates, they can be customized by providing your own TEMPLATE_NAME.xaml files.
Xamarin
They are accessible as DataTemplates from UBIKThemes.xamlx and the syntax in XAML is {DynamicResource TEMPLATE_NAME}. Just like such templates, they can be customized by providing your own DataTemplate resources (with the names of TEMPLATE_NAME) in UBIKThemes.xamlx.
- String/Text: named as UBIKPropertyDirectItemString.
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]}.
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 and 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 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 behaviors and controls
Here are some Behaviors and/or controls we have created for the purpose of property direct editing.
UWP
The KeyEventTriggerBehavior is a specialized version of the EventTriggerBehavior in the way that it limits the event to KeyDown and allows customizers to define which key should trigger the action(s).
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:behaviours="using:UBIK.WinX.Behaviors">
<Interactivity:Interaction.Behaviors>
<behaviours:KeyEventTriggerBehavior KeyName="Enter">
<Core:InvokeCommandAction Command="{Binding ConfirmEditCommand}" />
</behaviours:KeyEventTriggerBehavior>
<behaviours:KeyEventTriggerBehavior KeyName="Escape">
<Core:InvokeCommandAction Command="{Binding CancelEditCommand}" />
</behaviours:KeyEventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</TextBox>
Xamarin
The SelectAllEntry optionally accepts two commands (ReturnCommand & EscapeCommand) to execute when a user inputs the return key ↵ Enter and the escape key Esc respecitively.
<renderers:SelectAllEntry ...
ReturnCommand="{Binding ConfirmEditCommand}"
EscapeCommand="{Binding CancelEditCommand}" />
</Grid>
