Introduction
- Many developers heavily rely on copy and paste when building SCADA interfaces, and things often go smoothly until they don’t. Imagine realizing that your original design had a flaw. Now, you must update every copied version across your application. Worse still, if each view has its own data binding, you’ll have to rebind every instance after correcting the design.
- This scenario is common in SCADA and MES design. You might start with two machines, but by the end of the quarter, you have 48. Without planning for scalability, you'll be forced to redesign from scratch.
- Modular design solves this problem. It simplifies scaling and eliminates repetitive redesign. In Ignition Perspective, two powerful tools, Flex Repeaters and Embedded Views, help designers achieve modular, scalable, and maintainable systems.
- This walkthrough focuses on how to use Flex Repeaters and Embedded Views to build modular designs in Ignition.
What is Modularity in SCADA Design?
Modularity in SCADA design refers to the practice of building user interfaces and system logic using small, reusable, and independent components, rather than creating large, monolithic views. Each component is responsible for a specific task or visual element.
In Ignition Perspective, modularity helps you break down a complex HMI or dashboard into manageable parts by using tools like Embedded Views and Flex Repeaters. These tools allow you to define a view once and reuse it wherever needed, with dynamic behavior driven by parameters or datasets.
Some of the benefits of modular designs include:
- Reusability: Create once, reuse everywhere.
- Maintainability: Update logic or visuals in one place without hunting through multiple views.
- Scalability: Easily add more machines, sensors, or subsystems without redesigning your layout.
- Consistency: Ensures a uniform look and feel across the application.
Flex Repeaters – Dynamic View Generation
A Flex Repeater dynamically repeats a single view multiple times based on data. It’s ideal when the same view structure (e.g., a machine card) is needed for multiple entries.
Use Cases
- Displaying a list of machines, tanks, pumps, or compressors.
- Building dashboards that auto-scale as more devices are added.
How to Use
- Add a Flex Repeater component to a view.
- Assign the path to your template view.
- Provide a list of parameter dictionaries—one per instance.
- The repeater renders a separate instance of the template for each set.
Benefits
- No need to manually place multiple identical views.
- Adding new items only requires updating the dataset (e.g., from a database).
Example use case
Let’s say we want to build a custom table using Flex Repeaters (instead of the default Ignition table component), just for enhanced visual control and flexibility.
Step 1: Create a Template View
Create a Flex View component called OrderTemplate with labels for each column:
Order Code, Customer ID, Product ID, Quantity, Total Cost, Due Date, Priority, Status, and Details Button.
Each label is bound to a parameter, defined in the view’s params section (set to input).
Here is the view hierarchy:
Here is the created view with the label components in place:
At the root/base of the project I have created parameters (params) – treat these as the parameters we pass to script functions:
The list of params has the details in all the label components on the view design. Remember the params are set to input state; meaning they are like variables that users can pass values or details to.
Step 2: Bind Labels to Params
Bind each label’s value to its corresponding param (e.g., view.params.orderCode, view.params.customerId, etc.).
Do the same for the rest of the label components.
Step 3: Create a Host View with Flex Repeater
Create another view named ActiveOrders. Add a header row (Flex container) and a Flex Repeater component beneath it.
In the Flex Repeater’s properties:
- Set the path to the OrderTemplate.
Deep select the flex repeater component and pass the path of your template as in the path section. This can be done by either navigating to the location of view using the dropdown next to the path component or copying the path of the template and pasting in the path section of the flex repeater.
After adding the path add an instance and this will create an instance of the template view with the default parameters that were set during the instance creation.
Bindings can be used to pass the params to the instance section to auto-create the instances as the records grow in the database. In this case the instance is bound to a Named query whose output is set to be in JSON with transforms to ensure the names of the parameters match the names set in the instance definition template.
Here is the final design outcome:
Instances:
The table view:
Embedded Views - Reusable Building Blocks
An Embedded View allows you to place one view inside another. While they don't dynamically repeat like Flex Repeaters, they’re invaluable for keeping your interface modular and clean, especially in navigation systems, P&ID diagrams, or custom page layouts.
Example Use Case – Switching Views with a Dropdown
Suppose you have 10 different station views, each with a unique design and data structure. You want the user to switch between these views using a dropdown.
Walk with me:
Steps:
- Create a base view named IndexPg.
- Inside it, add:
- A Flex container with a Dropdown component.
- An Embedded View component.
- Create separate views: View1, View2, View3, etc., each with unique content.
- In the Dropdown options:
- Set the label to the view name.
- Set the value to the path of each view.
- Bind the path property of the Embedded View to the selected value of the Dropdown.
Result
As the user selects a different view from the dropdown, the Embedded View updates to display the selected view dynamically.
Conclusion
Achieving modularity in Ignition Perspective is essential for building SCADA and MES systems that can scale, adapt, and evolve without extensive redesign.
By leveraging Flex Repeaters for dynamic view generation and Embedded Views for reusable layout components, you can:
- Eliminate repetitive work
- Centralize design updates
- Make your project scalable and future-proof.