Component extensibility

The easiest way to develop a custom component is to extend a component. Listed here are solutions that give existing components custom settings, properties, or functionalities. We can use this solution if we want to use a component in the same way in several places in our application, or when we want to enhance a component's functionality in order to perform a given task.

How to implement it

When extending a component, you need to create a new component with an existing component as an ancestor. A new component must extend an existing component. Of course, all the settings and methods that were found in the existing component can be used in the new component due to inheritance. This is how you create a new component with existing but also completely new features.

Take the example of creating a button that will save the contents of a form component to the database. During the save, data validation is performed. If data is found to be valid, it will be saved. Invalid data results in an error message to the user and interrupts the save process. These buttons created can be used in several places in an application by simply adding our button components to the page. In the below example, the SaveButton represents such a button.

Source code of the custom component SaveButton:

The component in the example above can then be used on any page as a built-in component. When creating the button, you must specify the instance of the Form component to which you want to save the data. The save is implemented by the button itself. The button is displayed with a 'SAVE' icon and a 'Save' caption.

Example of reusing the button created above: