Edit Scope Managing unsaved edits in Ibiza Brad
Edit. Scope – Managing unsaved edits in Ibiza Brad Olenick – Principal Architect 3/12/2015
Demo – Scenarios
UX goals Unsaved edits shouldn’t inhibit spontaneous navigation ex. clicking a Notification, switching Journeys No “Discard changes? ” decision on navigate No “Will I lose my edits if I navigate now? ” uncertainty Predictable, consistent model across experiences UI virtualization is our basis for perf/scaling Ibiza disposes view models as UI goes off-screen and… …recreates view models as UI comes back on-screen Imperceptible to the user. Must retain unsaved edits!
UI virtualization Approach: Capture all Part state in a view model… …and make view models rehydratable Server data – Extension reloads from server/service View state – Ibiza Shell persists to/from “user settings service” Ex. current selection, tree node collapse/expand Unsaved edits – Use Edit. Scope!
Edit. Scope Simply a class in Ms. Portal. Fx. Data Preserves unsaved user edits on behalf of extensions Edit. Scope… …when a user edits data via a form or editable grid: detects changes to an extension’s model data persists changes to Ibiza’s “user settings” …when a view model is recreated: applies persisted changes to an extension’s model data
Demo – Simple editing
User modifies editable observables. Controls determine “dirty” based on comparing editable/original observables. “edit” View (form/grid) The editable/original data is bound into the view. Edit. Scope exposes the editable data as edit. Scope. root. Copy* Edit. Scope compares corresponding editable/original observables to generate edits. Copy The original data is available via edit. Scope. get. Original. Edit. Scope makes a copy of the input data. This is the “editable data”. Copy* Copy Edit. Scope instantiated with “input data”. This is the “original data”. Edit. Scope persists edits to “user settings”. Input data First use
Controls show the edited editable data. View (form/grid) The editable/original data is bound into the view. Controls determine “dirty” based on comparing editable/original observables. Input Copy* data View is restored to its edited state! Edit. Scope instantiated as before. Copy* Copy Edit. Scope applies edits to editable data. Input data Rehydrate
Demo – Edit. Scope. Id
Edit. Scope. Id associates an Edit. Scope with a Part or Blade …and edits then share the lifetime of the Part/Blade <Blade Name="Detail. Blade"> <Blade. Parameters> <Parameter Type="New. Edit. Scope" /> … <Custom. Part Name=“Detail. Part" New. Edit. Scope="True“/> <!-- inputs. edit. Scope. Id is then available to on. Inputs. Set --> Prompt “Discard Changes? ” when… A Blade is closed…that is associated with a dirty Edit. Scope A Blade is closed…that contains a Part associated with a dirty Edit. Scope A Part is unpinned…that is associated with a dirty Edit. Scope
Demo – Integrated forms
Forms integration Edit. Scope. Accessor Binds your form field to a pair of Edit. Scope observables Validates that you use only Edit. Scope observables…else bugs! Advanced – Allows binding a form field to a computed observable …computed over multiple Edit. Scope observables Enables Master/Detail form editing too When Master selection changes… …Detail form is rebound to new Edit. Scope (and not recreated)
Demo – List editing
Entity data model Without type metadata, objects are treated With type metadata, Edit. Scope objects reverted to treated an like or Deleted Edit. Scope ‘dirty’ property reflects Entities can be individually in Created, Updated property bags…and arrays as single values. as discrete, editable entities. unedited state. whethere any edited entities. state. U edit. Scope. add. Created(new. Entity, edit. Scope. revert(entity); var dirty = edit. Scope. dirty; entity. Array); entity. city(“Kirkland”); edit. Scope. revert. All(); edit. Scope. mark. For. Delete(entity); U var state = edit. Scope. get. Edit. State(entity); CC D
Demo – Edit. Scope management
Edit. Scope management Save edits to server Refresh existing data from server Use ‘refresh. Edit. Scope. Changes’ option on Edit. Scope. Cache Revert unsaved edits Use ‘save. Edit. Scope. Changes’ option on Edit. Scope. Cache Use ‘edit. Scope. revert(entity)’ or ‘edit. Scope. revert. All()’ Do these at the Edit. Scope. Cache level since they are async calls Data. Context is long-lived View models can be disposed during async save/refresh!
Why so much machinery? Edit. Scope. View – Forms can rebind to new (possibly edited) data Master/Detail form editing Edit. Scope. Cache/Edit. Scope. Id – Edit. Scope sharing across view models Blade with “form Part” and “’Save’ Command” Multi-Part, multi-Blade “document editing” We’re simplifying common cases! Parameter Collection FX pattern Encapsulates Edit. Scope. Cache/View for simple form scenarios Blade Toolbars – Commands in locked Blades can share Part’s view model No need to share an Edit. Scope across view models More in the future?
Wrap-up Caveats Don’t programmatically modify Edit. Scope observables! …or you’ll get “Discard edits? ” dialogs after no user edits (BUG!) Supply type metadata to treat arrays as entity arrays …efficient, per-entity edits; better concurrent editing Try CTRL-ALT-d Edit. Scope debug visualization Didn’t cover – Edit. Scope use in Parameter Collection pattern Learn more: Search auxdocs for Edit. Scope: https: //auxdocs. azurewebsites. net/en-us/documentation/sections/portalfx Relevant from Samples. Extension: Data…Master. Detail. Edit, Controls…Grid…Editable, Forms Yammer group – Ibiza discussion
Edit. Scope – Managing unsaved edits in Ibiza Brad Olenick – Principal Architect 3/12/2015
- Slides: 19