DEV Community

Kevin Jump
Kevin Jump

Posted on • Updated on

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 :

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}">
            <uui-button @click=${this.getTime} look="primary" color="positive" label="get time"></uui-button>

            <uui-button @click=${this.getDate} look="primary" color="default" label="get date"></uui-button>
Enter fullscreen mode Exit fullscreen mode

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

it looks like this :

Umbraco Time dashboard

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();
Enter fullscreen mode Exit fullscreen mode

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() {

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

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

        this.observe(, (_date) => {
   = _date;

Enter fullscreen mode Exit fullscreen mode

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


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.

Top comments (0)