Mail: [email protected]
Phone: +1(424)231-4091
Everything you need to know about NexoPOS.
NexoPOS provides a quick way to create a tabbed form with custom fields, but it's also possible to render a custom vue component instead of tab content. In this scenario, you control how the fields will be displayed, which gives you more leverage to create a completely unique layout for your CRUD component.
To make your component work seamlessly with NexoPOS, you need to provide validation details for your custom tab component. Remember, that the custom component should behave as a tab that has fields. This will ensure when the form is being submitted, it's checked for data safety.
The first step is to register your component on the global component objects: nsExtraComponents. Refer to the documentation on how to register vue component globally.
For the custom components to work, there are a few things that need to be provided and taken into consideration:
Here is how your custom component tab should look like.
Now that the user has interacted with your custom tab component, you might want to send his data to the ns-crud-form component so it can send it to the server. The better approach here is to emit a "changed" event with the fields (an array of fields with a specific definition, we'll share that later). We'll do it as the ns-crud-form component is unable to require form data on demand. Your component is then responsible for providing this.
Let's explain what's happening here:
If you don't want to use the ns-field component but instead a custom element you created, you still need to follow the field structure if you want your form data to be submitted correctly. The form data of your component should be provided as an object of fields. Here is the structure of a field:
{
type: 'text',
name: 'email',
description: 'field description',
validation: 'required',
value: 'field value'
}
The most important attributes here are "name" and "value".
A crud form usually consists of multiple tabs. At the current state, if you switch from one tab to another, your custom component will lose it's state. This is mainly because the component is mounted and unmounted on tab change, and then loses its state.
When you emit a "changed" with your component fields, these are made available on a property (tab) injected into your component.