Canvas App Components Custom Properties – Event Types and Data

Canvas Apps in Power Apps allow developers to create reusable components that simplify app design and ensure consistency. Custom properties are the key to making components dynamic, configurable, and interactive. This blog will explore Custom Properties of type Events and Data, and dive into Actions and Functions to understand their use cases.

---

What Are Custom Properties in Canvas App Components?

Custom properties enable developers to define how a component interacts with the app where it is used. These properties can:

1. Accept data from the app (input properties).
2. Send data back to the app (output properties).
3. Trigger actions or handle events.

Watch the video here or scroll down to read the article.

---

Types of Custom Properties

1. Data Properties

• Purpose: Used to pass information into or out of the component.
• Example Use Case:
  • You create a Rating component with a property SelectedRating of type Data.
  • This property can be used to capture the rating selected by the user and send it back to the parent screen.

Steps to Create:

1. In the component, define a custom property of type Input or Output.
2. Set the Data Type (e.g., Text, Number, Record, Table).
3. Bind this property to controls inside the component.

Real-World Scenario: A Customer Feedback form component receives feedback text and rating through Input Data properties and sends back the user’s input through Output Data properties.

---

2. Event Properties

• Purpose: Enable a component to handle events, such as a button click, and trigger custom behavior in the parent app.
• Example Use Case:
  • A Date Picker component allows the user to select a date. When the date changes, an OnDateChange event property triggers an action in the parent app.

Steps to Create:

1. Add a custom property of type Event.
2. Bind it to a control’s event, such as a button’s OnSelect.
3. In the parent app, define the behavior when the event is triggered.

Real-World Scenario: In a Task Scheduler app, a Calendar component triggers an OnDateSelect event, allowing the app to show tasks for the selected date.

---

3. Actions and Functions

• Purpose: Execute specific behaviors or business logic when called by the parent app.
• Example Use Case:
  • A Notification Toast component has a custom property ShowToastMessage that triggers a message display when called.

Steps to Create:

1. Define an Action custom property in the component.
2. In the parent app, use this property to execute the desired function, such as displaying a popup.

Real-World Scenario: A Payment Gateway component has an InitiatePayment action that starts the payment process when invoked by the parent app.

---

Putting It All Together: A Practical Example

Scenario: Building a Dynamic Table Component

You want to create a reusable Dynamic Table component with the following features:

1. Input Properties:
   • TableData (Data) – A table to display.
   • Columns (Data) – Column definitions.
2. Event Properties:
   • OnRowSelect – Triggers when a row is selected.
3. Action Property:
   • RefreshTable – Refreshes the table data.

Steps to Build:

1. Define Properties in the Component:
   • Add TableData and Columns as Input Data properties.
   • Add OnRowSelect as an Event property.
   • Add RefreshTable as an Action property.
2. Bind Properties Inside the Component:
   • Use a Gallery to display the data.
   • Set the Gallery.Items property to TableData.
   • For the row selection, set the OnSelect property of the gallery to trigger OnRowSelect.
3. Consume the Component in an App:
   • Pass the required table and column data as input.
   • Define behavior for the OnRowSelect event, such as showing details of the selected row.
   • Call RefreshTable to update the displayed data.

---

Benefits of Using Custom Properties

1. Reusability: Design once, use everywhere with different configurations.
2. Flexibility: Easily integrate components into various apps with minimal code changes.
3. Modularity: Break down complex apps into manageable, independent components.
4. Enhanced User Experience: Interactive and dynamic components improve usability.

---

Conclusion

Custom properties in Canvas App components allow developers to create sophisticated, reusable, and interactive app elements. Understanding how to use Data, Event, and Action properties, along with custom functions, can significantly enhance your app design process. With real-world use cases, these properties empower you to deliver scalable and maintainable solutions.