cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
AndrewLyMVP
Level 8

Problem with external libraries

Hey again.

 

I'm trying to implement a key binding example.. (where i press a key combination e.g. control-J, and it pops up an alert).. here's a codepen example.

https://codepen.io/andrewly/pen/zQYmor

 

It uses the "mousetrap" library.

https://www.npmjs.com/package/mousetrap

 

I can get it to compile, but when i run it through the test harness it comes up with :

keybind.PNG

 

 

Can anyone tell me where i'm going wrong?  Here is my .ts file.

 

import {IInputs, IOutputs} from "./generated/ManifestTypes";
import * as mt from "mousetrap";


export class KeybindingExample implements ComponentFramework.StandardControl<IInputs, IOutputs> {

	private keybindLetterOrSequence : string;
	private keybindPopupMessage : string;

	/**
	 * Empty constructor.
	 */
	constructor()
	{

	}

	/**
	 * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
	 * Data-set values are not initialized here, use updateView.
	 * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
	 * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
	 * @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
	 * @param container If a control is marked control-type='starndard', it will receive an empty div element within which it can render its content.
	 */
	public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
	{					
			// Add control initialization code
			mt.bind( this.keybindLetterOrSequence, function() {
			alert( 'hi' );
			// alert( this.keybindPopupMessage );
		})
	}


	/**
	 * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
	 * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
	 */
	public updateView(context: ComponentFramework.Context<IInputs>): void
	{
		// Add code to update control view
	}

	/** 
	 * It is called by the framework prior to a control receiving new data. 
	 * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
	 */
	public getOutputs(): IOutputs
	{
		return {};
	}

	/** 
	 * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
	 * i.e. cancelling any pending remote calls, removing listeners, etc.
	 */
	public destroy(): void
	{
		// Add code to cleanup control if necessary
	}
}
1 ACCEPTED SOLUTION

Accepted Solutions
alchin
Level: Powered On

Re: Problem with external libraries

To illustrate how I got your control to work I did:

 

1. Created a new PCF project using the CLI

2. Ran npm install to pull down PCF build tools

3. Ran npm install --save mousetrap

4. Ran npm install --save @types/mousetrap

5. Updated my index.ts with your source code

6. Set keybindLetterOrSequence variable to 'h'

7. Launched the control in the harness, and hit 'h' key, which pops up the alert

 

Thanks,

Alex

View solution in original post

5 REPLIES 5
Highlighted
MannyGrewal
Level: Powered On

Re: Problem with external libraries

Hi Andrew,

Hope you are doing well. My penny worth is that try placing the Mousetrap js files inside a folder called libs (or lib). That way webpack will bundle up your external library into the primary bundle and be able to resolve the Mousetrap js.

alchin
Level: Powered On

Re: Problem with external libraries

Hi Andrew,

 

Are you certain that the code for index.ts you shared in this post is accurate?  I copied your source code and was able to get the harness to load your control.  I did have to make a small edit to ensure that this.keybindLetterOrSequence was set to a valid string value.  Otherwise, there was no issue loading the control.

 

How did you pull down the mousetrap library and types?

 

Thanks,

Alex

alchin
Level: Powered On

Re: Problem with external libraries

To illustrate how I got your control to work I did:

 

1. Created a new PCF project using the CLI

2. Ran npm install to pull down PCF build tools

3. Ran npm install --save mousetrap

4. Ran npm install --save @types/mousetrap

5. Updated my index.ts with your source code

6. Set keybindLetterOrSequence variable to 'h'

7. Launched the control in the harness, and hit 'h' key, which pops up the alert

 

Thanks,

Alex

View solution in original post

AndrewLyMVP
Level 8

Re: Problem with external libraries

Thanks guys.

 

I think it's actually this line that causes it to crash:

mt.bind( this.keybindLetterOrSequence, function() {
Replacing with 
mt.bind( 'h', function() {
works.
 
alchin
Level: Powered On

Re: Problem with external libraries

That line is OK as long as you initialize keybindLetterOrSequence to some valid string.

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors
Users Online
Currently online: 163 members 5,497 guests
Please welcome our newest community members: