Settings: Footer Customization

From NexoPOS 5.3, you can render custom vue components at the footer of any settings object. The idea is to give way to interact with the current form being rendered. You'll typically use that to (not limited to):

• reset default settings
• save settings differently
• etc.

Requirements

Before loading a custom component at the settings footer, you must inject that component first. While defining your component, the settings component will provide a "parent" property to that component so you can access the settings form from your component and eventually reload the settings if necessary (console.log will be your best friend).

Define Component On Settings Class

If your module defines settings classes, we'll use it to add our custom buttons. A typical settings class will look like this:

Now, we'll add to the "tab" section a new sub-section "footer" which supports "extraComponents" which will define an array of strings (which are the names of the vue components you defined on the nsExtraComponents above). In the above settings, we used "myExtraComponent" as the name of our Vue component, that's what we'll use.

We should have a setting that looks like this.