Early Adopter's guide to Umbraco v14 [Trees] - Stores

Inbetween our datasource- that is maintaing the tree state, so if for example if someone changes the name of item in the editor, the tree name will be updated.

Code for these posts is avalible in our TimeDashboard Repository FrontEnd (typescript) & Backend (c#)

Datastore.

our data store, again will inherit from an Umbraco based store UmbUniqueTreeStore which allows us to build a tree as long as we have a unique property on our classes.

export class TimeTreeStore extends UmbUniqueTreeStore {

    constructor(host: UmbControllerHostElement) {
        super(host, TIME_TREE_STORE_CONTEXT.toString());

        new UmbStoreConnector<TimeTreeItemModel, TimeTreeDetailModel>(
            host,
            this,
            TIME_TREE_STORE_CONTEXT,
            (item) => this.#createTreeMapper(item),
            (item) => this.#updateTreeItemMapper(item)
        )
    }

    #createTreeMapper = (item: TimeTreeDetailModel) => {
        const treeItem: TimeTreeItemModel = {
            unique: item.unique,
            parentUnique: null,
            name: item.name,
            entityType: item.entityType,
            isFolder: false,
            hasChildren: false
        };

        return treeItem;
    };

    #updateTreeItemMapper = (model: TimeTreeDetailModel) => {
        return {
            name: model.name
        };
    };
}

The store allows us to map from the "tree item model", to a "details model". a tree item has enough information on it to render the treee node.

The detail model has the information that would be used by the workspace to show the main page of information to the user.