Is it possible to change the options programatticaly in away it would impact the UI


#1

I have tried reacting to user’s change of the product type in order to pick different value for a certain field.
so in updateProduct() I changed the INSTALL_OPTIONS but that didn’t seem to change the value.
Ideally I would have different default per different product but that didn’t seem to work as well.

In your example here: https://www.cloudflare.com/apps/welcome-bar/install
Say I want, once the user selected the Pro product to immediately default the value in the second field to “Show visitors a random message from a collection”. Is there a way to do so?


#2

Hi, Yes this is possible using the Live Update feature. You’d add the following to your install.json:

    {
      "options": ["_product"],
      "execute": "INSTALL_SCOPE.updateProduct(INSTALL_PRODUCT)"
    }

Then, you’d want to implement the function updateProduct

Please read more here:https://www.cloudflare.com/apps/developer/docs/install-json/preview#how-to-enable-live-update


#3

Thanks, yes, I was following that path and was able run a code as a by product of a product change.
However, while I did change the options var (see below) I couldn’t see the option’s value reflected in the UI (used by the user to configure the app).
Is there something I need to do in updateElement in order to refresh/reload the configuration UI?

window.INSTALL_SCOPE = {
    updateOptions: function updateOptions(nextOptions) {
      options = nextOptions;
      updateElement();
    },
    updateProduct: function updateProduct (nextProduct) {
      product = nextProduct;
      if (product.id === 'pro') {
        options.action = "signup";
      }
      updateElement();
    }
  }

#4

@victoria, any chance you can help me resolve this issue? thx in advance