Early Adopter's Guide to Umbraco v14 Packages : Communicating with the server! - Part 4 - FrontEnd!

The code for this series of posts can be viewed here : https://github.com/KevinJump/TimeDashboard

Finally our journey from the server is about to reach the user! We have automatically built our OpenApi client, made a data store, a repository, and a context. Now we can plumb that into an element and show it to the user.

5. A Dashboard

For brevity (now he's going to be brief!), we are not going to discuss setting up the dashboadElement, lets just say this is our render method:

render() {
   return html`
      <uui-box headline="${this.title}">
         <div>
            <uui-button @click=${this.getTime} look="primary" color="positive" label="get time"></uui-button>
            <h2>${this.time}</h2>
         </div>

         <div>
            <uui-button @click=${this.getDate} look="primary" color="default" label="get date"></uui-button>
            <h2>${this.date}</h2>
         </div>
      </uui-box>
  `
}

it shows two buttons, and two values, so the user can get the time, and the date.

it looks like this :

There are two parts to updating the interface:

making requests

You can see from our markup we have a getTime and getDate method. These methods call our context, to do just that.

async getTime() {
   await this.#timeContext?.getTime();
}

async getDate() {
    await this.#timeContext?.getDate();
}

Now these methods could be made to return the values, but here we are using the observable properties; because well we wanted to show how they worked, and also it means if these values where updated in other places in the app, they would show as updated because we updated these values in the context.

Observing changes

So to see the changes, we observe the values from the context:

constructor() {
    super();

    this.consumeContext(TIME_MANAGEMENT_CONTEXT_TOKEN, (_instance) => {
        this.#timeContext = _instance;

        this.observe(_instance.time, (_time) => {
            this.time = _time;
        });

        this.observe(_instance.date, (_date) => {
            this.date = _date;
        });

    })
}

This means when these values change no matter where from we will get the update to our element.

Summary.

There you go simples. Well not really simples, but thats all the bits you can use to get your content from server to client and back. The likelyhood is you might not need all the layers but I am very pleased to have finally worked it out (especially the auth bit!). and now package building can commence.

I also promise to revist some of the things i skipped over to get here. the Umbraco docs are going for v14, and will probibly cover all of this way better - so do check them out.

https://docs.umbraco.com/umbraco-backoffice/extending/customize-the-editing-experience