Calling a Custom Page using modern commanding and TypeScript

This is the continuation of a series on combining Custom Pages and Custom APIs, but also using the Creator Kit and a bit of TypeScript in the process.

In the first blogpost we learned how to create a Custom Page using the Creator Kit templates and its ready-to-use components.

In the previous blogpost we learned how to create a Custom API using bulk request to execute complex business logic.

So, we already have the Custom Page and the Custom API, so the next step is to combine them and for that we have to add a button on the Quote form, so that when the user clicks on it, the Custom Page opens as a popup window.

Then the Custom Page calls the Cloud Flow which is in charge of calling the Custom API, and that’s the whole process.

So to add the button we have two options, the modern commanding or our classic and beloved Ribbon Workbench, both ways are reliable but this time I’m going to choose the modern commanding.

But first we need to create a project in Visual Studio for our web resources, so let’s start with that.

Create web resources project

To start you have to go to the path where you created the project for the Custom API, and you have to create a folder there, call it WebResources:

Then you have to go to Visual Studio, right click on the solution and add an existing website:

Now you have to select the new folder you have just created:

Next you have to add a new item called “package.json” so right click on the WebResources project and add a new element:

Enter package.json as the name:

And now copy and paste the following content (Adjust where needed):

{
  “name”: “P365I.WebResources”,
  “version”: “1.0.0”,
  “description”: “”,
  “main”: “index.js”,
  “scripts”: {
    “build”: “npm run compile”,
    “test”: “echo “Error: no test specified” && exit 1″
  },
  “author”: “”,
  “license”: “ISC”,
  “devDependencies”: {
    “@types/es6-promise”: “^3.3.0”,
    “@types/xrm”: “9.0.67”
  },
  “dependencies”: {
    “latest”: “^0.2.0”,
    “promise”: “^8.1.0”
  }
}

Now you have to repeat the steps to add a new item, but this time the name of the item must be “packages.config”:

The content of this file is the following:

<?xml version=”1.0″ encoding=”utf-8″?>
<packages>
  <package id=”Microsoft.CrmSdk.CoreTools” version=”9.1.0.25″ targetFramework=”net40″ />
  <package id=”spkl” version=”1.0.431″ targetFramework=”net40″ />
</packages>

Again, repeat the steps to add a new item, but this time the name of the item must be “tsconfig.json” with the following content:

{
  “compileOnSave”: true,
  “compilerOptions”: {
    “module”: “esnext”,
    “noImplicitAny”: true,
    “removeComments”: true,
    “preserveConstEnums”: true,
    “sourceMap”: true,
    “target”: “ES2017”,
    “outDir”: “dist”,
    “moduleResolution”: “node”,
    “esModuleInterop”: true,
    “declaration”: false,
    “rootDir”: “src”,
    “resolveJsonModule”: true,
    “allowSyntheticDefaultImports”: true,
    “strict”: true,
    “baseUrl”: “.”,
    “skipLibCheck”: true,
    “paths”: {
      “@common/*”: [
        “src/common/*”
      ]
    },
    “lib”: [
      “es6”,
      “DOM”,
      “ES2017”
    ]
  },
  “include”: [
    “src/**/*.ts”
  ],
  “exclude”: [
    “node_modules”,
    “dist”
  ],
  “typeRoots”: [
    “node_modules/@types”,
    “node_modules/promise”
  ]
}

Now you have to create two folders under the WebResource project, right click and add a new folder: