Answered

Creating a common helper.ts file for model-driven app forms

(1) Share

Report

Posted on by westerdaled

636

After writing a lot of TypeScript: form logic held in multiple files, I thought I would include all my common functions in a helper.ts file. Unfortunately, after importing it into a Form.ts file, I don't seem to get passed an intialisation error as shown below .

Setup

in my TS folder I have run (npm) installed : typscript, @types/node and @types/xrm . My event handler logic works fine if I attach the Form.ts to the form and call any function contained it.

MyProjectRootFolder\front-end\ts\src\code\utils\Helper.ts

 // show a simple dialog
   export function displayPromptText(titleText : string, promptText : string)
   {
     let alertStrings = { confirmButtonLabel: "Ok", text:promptText, title: 
     titleText  };
     var confirmOptions = { height: 400, width: 450 }; 
     Xrm.Navigation.openAlertDialog(alertStrings, confirmOptions).then(  
     function (success) {    

     console.log("Dialog closed using OK button.");
     }, function (error) {
      console.log(error.message)
   }  

 )   
}

MyProjectRootFolder\front-end\ts\src\code\forms\MyForm.ts

  import * as helper from  "../utils/helper"
  // also tried this
 // import { displayPromptText } from "../utils/helper";


  // if you call the line below say in Form load you get the intialisation error 
  helper.displayPromptText("test","test");

Both Helper.ts and Form.ts transpile to JavaScript without issues. Whether I import all functions or a single function I don't get passed this error:

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (3)

Answers (1)

Verified answer

kalluu91 39 on at

Like (0)

Report

I guess that the js bundler does not compile the typescript code correctly.

Check this blog post to have a correct setup for typescript web resource: https://kalcancode.wordpress.com/2025/03/26/how-to-set-up-a-typescript-project-for-power-apps-web-resources/

The setup shown in the article also includes the utils use case to share the common functions.

Regards,

Kim Anh

Was this reply helpful? Yes No
westerdaled 636 on at

Like (0)

Report

@kalluu91

Thanks very much, I will check out that post and report back. I thought I would end up using webpack at some stage.

Cheers

Daniel

Was this reply helpful? Yes No
westerdaled 636 on at

Like (0)

Report

@kalluu91

Your suggestion worked like a charm. I have tested it out via in the setup in the post and also in another project. The thing I was always fixated on was needing to attach the shared/helper.js to the main form as well as the entity.js which called the functions in the helper file. You don't need to as webpack sorts that all out. The index.ts is another revelation, as I now I can work on smaller functional ts files rather than one huge entity ts file.

Cheers

Daniel

Was this reply helpful? Yes No