Dynamic Text Book Input

[henryblu]

This may be possible, but it may be a stretch. What I would like to do is design one page as an input box for some text.

This text that is entered will then be stored in some way and displayed on another page inside a <div></div>

I'm not sure whether there is a mango specific way to do this, i.e. setting the value of a mango data point: type text. Or using the file store??

Any thoughts / suggestions are welcome!

[Jared Wiltshire]

@henryblu You can use the JSON store to store/retrieve arbitrary data to the Mango server over the REST API. There is a pretty detailed example under "Examples"..."Utilities" (you will need to enable "Examples" in the menu editor if you cant see it, or navigate to /ui/examples/utilities/json-store).

Note that if you change the value and hit save on your "admin" page, the page that is viewing that data will get the changes pushed to it via a websocket and will update in real time without refreshing the page.

[henryblu]

Thanks @Jared-Wiltshire - this worked perfectly.
The motivation was to be able to easily change the energy saving prompts on an energy usage dashboard, quite similar to the ones from Greensense View: http://greensense.com.au/greensense-view/product-tour/reduce-energy-water-waste/

Now users can log into the input page, save the prompts and it will appear immediately on the dashboard. Cheers!

[henryblu]

Hi @Jared-Wiltshire - is there an expression I could use to determine how many items are in the JSON store? If this is difficult, what expression could I use to show the entire JSON store with all the entries?

[Jared Wiltshire]

There is a REST API end point which will retrieve an array of JSON store XIDs at /rest/v1/json-data however there isn't a component or anything for it yet.

The next UI module release (next Monday) will however have a component which will display a table of all the JSON store entries and enable you to delete entries.

Here's a quick component you can add to your user module via the UI settings page -

define(['angular', 'require'], function(angular, require) {
'use strict';

var userModule = angular.module('userModule', ['maUiApp']);

userModule.component('getJsonStoreXids', {
    bindings: {
        gotXids: '&'
    },
    controller: ['maJsonStore', function(maJsonStore) {
        this.$onInit = function() {
            maJsonStore.query().$promise.then((items) => {
                this.gotXids({$xids: items});
            });
        }
    }]
});

return userModule;

}); // define

Then you can use it like so

<get-json-store-xids got-xids="xids = $xids"></get-json-store-xids>
<p>There are {{xids.length}} items in the JSON store.</p>
<pre ng-bind="xids | json"></pre>

[henryblu]

Thanks Jared, that's perfect.