Subcomponent
The Subcomponent element allows one component to be embedded within another while retaining its original properties. This enables reuse of components across different sections of the application.
For example, suppose a Table component needs to be displayed within a List component. In that case, a Subcomponent element can be created under the List component, and the Table component can be mapped to it. This element ensures that the Table component retains its properties that were defined during its creation while being embedded within the List component.
This subcomponent element support is available under List (Template 4) and Fieldset yet.
Common Use Cases:
- Component Embedding: Inserts a component (e.g., Table) inside another (e.g., List).
- Modular UI Design: Reuses components across multiple sections.
- Dynamic Content Mapping: Displays nested components while maintaining their configuration.
Configuration
The element’s configuration in vFlow 2.0 allows you to customize its behavior, appearance, and interaction across various devices. Through simple settings, you can control everything from its visibility and functionality to how it adapts to different screen sizes, making it flexible and user-friendly for developers and end-users. Let’s have a look at each of its configurations:
Basic
| Basic Configuration | Description |
| Type | The Type indicates the type of element you are configuring. In this case, it defaults to “Subcomponent” and cannot be changed here. This selection is made initially when you first create the element. |
| Reference Name | The Reference Name is a unique identifier assigned to the element for internal use. This name is visible only to vFlow users, and is not displayed to end-users. The Reference Name is intended for your convenience, helping you easily identify and manage the element throughout. |
| Label | The Label is the name or text displayed on the element, making it easily recognizable to end-users. |
| Description | The Description field is intended for use by application designers or administrators (vFlow users) to provide additional context or details about the element. This description is not visible to end-users and is used solely for internal reference to assist with element management. |
Properties
| Property | Description |
| Visible | To make this invisible, unselect this checkbox. |
| Enable | To disable the element, click to clear this checkbox. |
| Supported Component List | Find the component by its Reference Name in the dropdown list of components eligible for embedding. |
Note that all the components can not be embedded, so this dropdown list has only embeddable components.
Following is the list of the subcomponents supported under the list and fieldset component:
| Component | Supported Subcomponent |
| List | 1. List 2. Table 3. Accordion 4. Chart |
| Fieldset | 1. List 2. Table |
Style
The Style option allows you to personalize the appearance of the element. This includes adjusting various visual aspects to ensure it complements your application’s overall design.
Note: If you style the embedded sub-component here, it will overwrite the styling defined in the parent configuration of the component.
Here’s a breakdown of different settings that you can make adjustments to:
- Laptop/Desktop width: The button automatically expands to take up 100% of the available width on desktop and laptop screens, ensuring it spans the entire container. However, this width can be adjusted according to the specific design or layout requirements.
- Tab width: On tablet devices, the button will also span 100% of the container’s width. This ensures that it adapts well to medium-sized screens, making it easier for users to interact with on touch devices. You can adjust this width as needed based on design preferences.
- Mobile width: For mobile devices, the button remains at 100% width to ensure full visibility and easy tap interaction, even on smaller screens. Like the other devices, this width can be adjusted as per requirement.
- Custom CSS Class Name
- Users can enter custom CSS class names in the provided input field to apply additional styles.
- Multiple Classes Names can be provided If needed. They can be applied by separating them with commas, as indicated by the example (
classA, classB).
Important Rules & Behaviors
- You must fill required fields in both Fieldset and its subcomponents to proceed.
- A footer button will stay disabled if required fields aren’t filled — this label will now say “Check mandatory fields with validations.”
- Server-side pagination won’t work in subcomponents. Users will see a note about this.
- Only ‘Path’ data types are supported for subcomponents, not other data sources (also shown as a note).
- You can apply some tasks on the subcomponents. However, these actions can be applied to the whole subcomponent (List/Table), not just individual fields. The tasks that can be applied:
- Show/Hide
- Enable/Disable
- Invoke
Best Practices
- Avoid Recursive Mappings: Do not map a component (such as a List) into itself, either directly or through indirect nesting. This type of recursion can cause crashes or unpredictable behavior due to infinite loop formation.
- Prevent Recursive Navigation Structures: Mapping elements like Tabs or Steppers into themselves or one another in a way that forms a cycle is restricted to maintain application integrity.