Unlike the other modules, ui-aux is capable of querying and storing properties and their values from the backend until we display them with vue on the frontend.
Using the example below, we can set up basic notifications on Dashboard that are only displayed to the partner when certain conditions are met, but it's capabilities are much more than that.
Configuration:
<ui-aux :tree-id="0" :marketing-props="['m.AccountStatus','m.ActiveDate']" v-slot="{ r, error }"> <v-alert v-if="r('m.AccountStatus') == '0'" type="warning" style="margin-bottom: 8px;"> <template #default> You’re not participating in our affiliate program yet. Please purchase a starter kit to enter the program and get rewarded. </template> </v-alert> <v-alert v-if="! r('m.ActiveDate')" type="error"> <template #default> Your account is currently inactive, so you don’t get any kind of reward! </template> </v-alert> </ui-aux>
| props |
type |
default |
description |
| :tree-id= |
Number | "0" |
ID of the tree from which the properties will be taken |
| :marketing-props= |
Array | "['m.AccountStatus','m.ActiveDate']" |
An array of properties that will be stored until they are called |
| v-slot= |
String | "{ r, error }" |
Storage slots, have fixed values - p, r, loading, error, where p is a presentable value from the requested property, r is not presentable, loading is in case it's still loads, and error is an error, the value cannot be loaded |
After that, in the <v-alert> component we set the display condition:
v-if=“r(‘m.AccountStatus’) == ‘0’” - which literally can be translated as “if the value stored in r = 0, then show <v-alert>...</v-alert> and also everything that goes into/under it, in this case including <template>...</template>”, and the value is stored inside r from the AccountStatus property.
Vasilii G
Comments