Cell Rendering in Power Apps: Trigger Custom Events
Discover how to trigger your own events with Power Apps Grid: Cell Renderer Dependency. Make rendering depend on other cells!
How to Resolve Custom Events in Power Apps Grid
In this YouTube video, Microsoft MVP Diana Birkelbach discusses a common issue faced by users of the Power Apps Grid- the inability to trigger your own events based on cell renderer dependency on other cells.
Experts note that often while working with Power Apps Grid, customization control can render a cell depending on another cell's value. However, Power Apps Grid does not react accordingly if data isn't refreshed or changed which can create complications.
In her tutorial, Birkelbach explains how to circumvent this issue, and trigger your own events for cell renderer. She sets up a unique use-case for the viewer using a table labeled “Consumption”. The scenario involves highlighting the “Amount” column in different colors based on the column "Plan".
The crux of the problem arises when the "Plan" value is edited, but no corresponding event forces the re-rendering. This essentially means that there is outdated data still displaying. This, she speculates, is a likely system glitch in Power Apps Grid system.
EventManager Class
To rectify this, the most plausible solution seems to force a refresh by modifying and then re-stopping the control edit mode. However, this approach could cause undesirable flickering on the screen. Therefore, Birkelbach suggests that users create a EventManager class which trigger its own events and lets the cells adhere to them.
This idea comes with its own set of challenges, such as detecting when the value changed, which can be bypassed through implementing an own cache. After implementing her outlined changes, she points out that the color of the amount changes immediately after a change is registered in the plan.
Finally contributing further general insights into the Power Apps Platform, Birkelbach says users can expect high-performance and quality outcomes with smart workarounds and careful observation of system behaviors. Even when it has limitations, it is still considered a valuable, dynamic tool for businesses to rely on when it comes to the process of data modeling.
Learn about Power Apps Renderer Dependency
The blog focuses on Power Apps Grid, specifically on a feature called "Cell Renderer Dependency" that allows a user to create custom events for cell rendering. This functionality allows the rendering of one cell to depend on the state of another. Cell rendering can be a pain-point for users as it doesn't always re-render cells when data changes or doesn't provide updated data. This post, therefore, shows how to work around this issue.
- The use case revolves around a consumption table where the "Amount" column must change colors based on the selected "Plan" (a type of Choice/OptionSet).
- The blog defines particular rules for each plan using coded conditional statements, influencing when and how color changes occur.
The problem encountered is that after altering a plan, although the amount is re-rendered, often, the old value for the plan remains. Currently, there isn't an event to initiate re-rendering. The post suggests two potential solutions for this issue. One option could be to change the control to edit mode and back to view mode to force a refresh. However, this suggestion might lead to flickering on the screen, which isn't visually appealing.
The second solution offered entails triggering an "event" of your own. Subsequent paragraphs discuss how to create EventManager, a class that responds to events by triggering and attaching cells. Based on the CustomEvent API, the EventManager can subscribe, unsubscribe, and publish events. This class instance is created inside a cellRenderer closure.
Following this, a React component is created for rendering the dependent cells. The component maintains plan (dependency) in a state, uses "React.useEffect" to attach when the component is created or unloaded, and subscribes to the EventManager. Thereafter, the EventManager notifies if there has been a change, and the attached callback changes the state of "currentPlan", which results in React rerendering the cell.
Additionally, the event can be triggered in two situations: when a dependency cell has its own renderer, or when it doesn't. EventManager's publish method can trigger the event when a cell value is changed, and an own cache tracks the last "plan" value per row, where change is detected. If the latter is the case, the standard controls will be used by the Power Apps Grid.
Keywords
Power Apps Grid, Cell Renderer, Dependency Trigger, Own Events, Grid Dependency, Power Apps Events, Renderer Dependence, Power Grid Cells, Event Trigger, Apps Trigger Events