Skip to main content

Trigger JavaScript on Click of Button PCF Control

 

Overview

The TriggerJavascript control is a custom PCF (PowerApps Component Framework) control that renders a button with customizable label, icon, and on-click script execution. The control allows users to dynamically trigger JavaScript code upon clicking the button.

Dependencies

  • IInputs, IOutputs from ./generated/ManifestTypes (Auto-generated types from PowerApps)

  • CSS styling from ./CSS/TriggerJavascript.css

Class: TriggerJavascript

This class implements ComponentFramework.StandardControl<IInputs, IOutputs> and manages rendering a button inside a container, dynamically executing JavaScript code on button click.

Properties

Private Properties

  • _container: HTMLDivElement - A reference to the container element where the button will be rendered.

Methods

constructor()

Initializes a new instance of the TriggerJavascript control.

init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement): void

Parameters:

  • context: Contains the control's input and output properties.

  • notifyOutputChanged: Callback function for notifying changes in outputs.

  • state: Stores the initial state of the control.

  • container: The HTML container element where the control is rendered.

Functionality:

  • Stores the container reference for later use.

updateView(context: ComponentFramework.Context<IInputs>): void

Parameters:

  • context: Contains the input properties that can be used for rendering updates.

Functionality:

  • Clears the container before rendering.

  • Retrieves the input parameters:

    • buttonLabel: The label text of the button.

    • onClickScript: The JavaScript code to execute when the button is clicked.

    • iconUrl: Optional URL of an icon to display on the button.

  • Dynamically creates a button element:

    • Sets the button label.

    • If an iconUrl is provided, it loads an image before the button text.

    • Adds a click event listener to execute the provided JavaScript.

    • Appends the button to the container.

Error Handling:

  • If iconUrl is invalid, logs an error and removes the broken icon.

  • If onClickScript execution fails, logs the error.

getOutputs(): IOutputs

Functionality:

  • Returns an empty object, as this control does not output values.

destroy(): void

Functionality:

  • Clears the container when the control is destroyed.

Output:
   




Example Usage

  • This control can be used in PowerApps to provide customizable button actions based on user-defined JavaScript.

  • Example configuration:

    {
  "buttonLabel": "Submit",
  "onClickScript": "alert('Button clicked!');",
  "iconUrl": "https://example.com/icon.png"
}

Security Considerations

  • The use of eval(onClickScript) poses security risks; ensure only trusted scripts are used.

  • Validate and sanitize user input before execution.

Styling

  • Custom styles can be applied through ./CSS/TriggerJavascript.css to modify button appearance.

Conclusion

The TriggerJavascript control provides a flexible way to trigger JavaScript execution from PowerApps, allowing dynamic behavior customization through user-defined parameters

Comments

Post a Comment

Popular posts from this blog

Comparison: Using Workflows vs. JavaScript vs. Plugins in Dynamics CRM?

  There are three ways to automate actions in Microsoft Dynamics CRM: workflows, JavaScript, or plugins. In this blog we will discuss the difference between them and how to choose which option is appropriate for your task. Workflows  can perform tasks such as updating data or sending email. They are triggered by saving records, creating records, or changing specific fields on a form, and once triggered, they run on their own in the background. As you can see in the example of  How to Assign a Territory to a Lead in Dynamics CRM , you can even look up data in another entity. JavaScript  runs on the screen while the user is using a form. JavaScript is triggered by events within the page, updating a field or saving, and it is commonly used to hide or show different fields on the forms. You can also, for instance,  Populate a CRM 2011 Lookup or PartyList Field Using JavaScript  by having a lookup automatically linked to the record based on what is entered in an...
2 comments
Read more

Task Activity Timeline

  1. Overview The PCF Calendar Control is a custom PowerApps component that displays activities in a calendar-like view. It supports multiple views (monthly, weekly, yearly, daily), allows users to expand/collapse records for each date, and provides a scrollable interface for better usability. The control is built using TypeScript and CSS, adhering to best practices for type safety and maintainability. 2. Features View Modes: Monthly View : Groups activities by month. Weekly View : Groups activities by week. Yearly View : Groups activities by year. Daily View : Displays activities for individual days. Expand/Collapse Functionality: Users can click on a date to expand or collapse its associated records. Smooth animations enhance the user experience. Scrollable Container: A scrollable container ensures that large datasets are manageable. Responsive Design: The control adjusts its layout for smaller screens. Type Safety: The code uses TypeScript interfaces to avoid the use of any and...
Post a Comment
Read more