Extending the UI using panels

There are numerous ways in which you can customise the UI, all of which can be achieved through the use of creating and editing panels.

Customise a panel

Download the app source code and unzip it locally.

Open the command line to install the app following the same steps as before.

This app is going to create a function for you to give customers five gold rings. For this you'll need to add a new client property.

A common use for a client panel, might well be to add functionality around new and specific client properties.

For this example, you'll see that this panel adds a new tab to the customers section called 'Rings'.

In the Panels folder, open rings.component.js. The critical piece of code here is the RingsCtrl:

class RingsCtrl {
    constructor(bbAuthorisation) {
        this.client = this.filter.client;
 
        this.getRings();
    }
    async getRings() {
        // get the rings = this users a promise/async call as it might have to look up a question name
        const rings = await this.client.getAnswer('rings');
        this.rings  = parseInt(rings || 0);
    }
}

This code contains the control structure that will define the behaviour of the panel.

You can see it makes use of the client variable that is expected to be passed in as a context filter.

When you add something to 'this' it will then be available in the corresponding html file as $ctrl.

Now lets look at the html file. It also looks for an answer to custom question call 'rings' and makes sure the value is an integer.

<h3>{{$ctrl.client.name}}'s' Rings</h3>

AngularJS is used here to render out the client's name which is passed in to put a title in the page.

Add a client question

Now add in a client question. Log into Studio and go to Customise > Booking journey > Custom questions. Create a new question simply called 'rings' as a text field and mark is as admin only.

Add a function

First you'll need to add the on screen ability to give customer rings. Add the following to the HTML file:

<a class="btn btn-primary" ng-click="$ctrl.give_rings(5)">Give 5 rings</a>

This will call a function on the RingsCtrl class called give_rings().

This function isn't there yet, so it needs to be added to the rings.component.js file:

class RingsCtrl {
    constructor(bbAuthorisation) {
        this.client = this.filter.client;
 
        this.getRings();
    }
    async getRings() {
        // get the rings = this users a promise/async call as it might have to look up a question name
        const rings = await this.client.getAnswer('rings');
        this.rings  = parseInt(rings || 0);
    }
 
    give_rings(num) {
        console.log('give_rings', num);
        this.client.setAnswer('rings', this.rings + num);
        this.client.$update().then((client) => {
            console.log('gave rings');
            this.client.getAnswer('rings').then((rings) => {
                this.rings = rings ? parseInt(rings) : 0;
            });
        }, (err) => {
            console.error('failed to give rings');
            console.error(err);
        });
    }
 
}

This adds a function called give_rings() into the class.

This sets the new answer to the question and proceeds to update the server with a new answer.

If the answer was updated correctly, the local count of rings is updated with the new value.

Add HTML

Now update the UI to show the rings by adding the following lines to the rings.html file:

<br/>
<ul>
<li class="pull-left" ng-repeat="x in [].constructor($ctrl.rings) track by $index">
<img width="100px" src='https://vignette.wikia.nocookie.net/the-hobbit-and-the-lord-of-the-rings/images/9/97/Frodo%281%29.jpg/revision/latest?cb=20121229183714'/>
</li>
</ul>

This code will render the $ctrl.rings out.

Finally if you look back at day5_scripts > main.js you will also see a script.

This script tracks updates to clients as was done earlier.

client.getAnswer('rings').then( (rings) => {
console.log(client.name, " now has ", rings, " rings");

If you look at the logs using the command "hourglass-cli tail" you will see that an update is pushed out every time you give more rings.

Click here to see a final version of this code.

Challenge

Add a new option in the UI to remove the rings, or to give an arbitrary number of rings.