Better docs for setting up a new project

[AlexFsmn]

I am trying to setup a project for react but I am struggeling with the project structure to make this work.

dg.xrmquery.web.min.js is explcitly referenced in my project which I can see gets bundled in main.js but still I get this error on runtime: "XrmQuery is not defined"

It would be great if you could provide a more detailed guide on how to setup a fresh project or a starter project to learn from using XrmQuery.

[henrikhannemose]

Thanks for trying out XrmDefinitelyTyped!

I agree that there is room for improvement of the documentation. Have you tried following the current Getting started guide? We would ideally like to adapt it with your input.

Would you be able to share a minimal example of the project you have that shows the issue?

[AlexFsmn]

First, thank you for your fast reply! Yeah. I have read some of the documentation including the getting started guide.

What I would prefer is to improve that "Getting started" guide by not only showing how to generate the required files but also on "how to setup your first project". It would also be great if you would create a repository of an example project with react being able to use the Xrm context & XrmQuery.

This is my setup: I have used the nuget package on a simple application in order to generate the required files. This was done by

1. Installing nuget
2. Modifying the config file to the desired CRM instance
3. Run XrmDefinitelyTyped.exe

By doing this I got the following:

• Lib folder containing these files: /lib/dg.xrmquery.web.js /lib/dg.xrmquery.web.min.js /lib/dg.xrmquery.web.promise.min.js
• Xrm folder containing the xrm context from by CRM instance

I then created a typescript project using this: https://github.com/wmonk/create-react-app-typescript/

Pretty good way to setup a new react app using typescript although the linting is pretty strict.

After this I draged the lib folder to the /src directory and created a new directory in the root and named is /typings. I then removed two .js files in order to only use the .min.js file By now I have the standard project setup plus: /src/lib/dg.xrmquery.web.min.js /typings/XRM/alltypings

After this I added the directory to the XRM definitions to tslint.json. This was done using the following lines:

 "typeRoots": [
      "node_modules/@types",
      "typings/XRM/**"
    ],

(I don't really know if this is till necesarry since the definitions are found automatically by vscode but I read about this in the documentation)

The code I have is a simple button defined like this: <button onClick={() => this.getAccounts()}>Press</button>

Which executes this test method:

public getAccounts() {
    XrmQuery.retrieveMultiple(x => x.accounts)
      .select(x => [x.accountnumber])
      .execute(accounts => {
        // tslint:disable-next-line:no-console
        console.log(accounts);
      });
}

That is a modified version of the example found here: https://github.com/delegateas/XrmDefinitelyTyped/wiki/XrmQuery-Web-API

And after this I ran the project, pressed the button and got XrmQuery is not defined.

[mktange]

Generally, the standard way to include XrmQuery on a Form/web page is to just include the JavaScript code directly. For a CRM Form it is added as a separate web resource, and for a standard web page it can be added as a separate script entry directly in the HTML code.

I see that you are trying to use webpack to bundle it together with all your other code. This can most likely be made to work, but it probably needs to be set up in a special way.

XrmQuery is just basic JavaScript – no fancy modules or anything. If you want to bundle it with your other code, this can likely be done in a comparable way as to how this is done for JQuery. You can check out how JQuery can be included in webpack projects, and do something similar for XrmQuery.

[AlexFsmn]

Great thanks! It seems like there is something wrong with the way dg.xrmquery.web.min.js is bundled through webpack. The strange part is that I can see the script inside bundle.js. However, I got it working using solution 5 in the link you provided. For those wondering I just needed to add these 2 lines in /public/index.html:

<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script type="text/javascript" src="new_dg.xrmquery.web.min.js"></script>

The problem regarding the other solutions is that you have to eject the webpack code to make it work. Might be the only way though..

[ahnwarez]

Hi @AlexFsmn I'm working on building a webresource using ReactJs, TypeScript, Webpack, and XrmDefinitelyTyped. My setup is pretty close to yours, the only difference is that I'm not sure how to access the formContext in a webresource hosted in a CRM Form.

Did you have any success passing and consuming the formContext?

I would really appreciate any help.

[AlexFsmn]

Unfortunately I never tried to consume the form context. But this might help (depending on what issue you are facing): https://github.com/delegateas/XrmDefinitelyTyped/wiki/Form-scripting

[TomMalow]

Hi @AhmedAnwarHafez

Microsoft have not been very clear on how they intend for us to get the form context when working in a html/javascript WebResources hosted on the form. They do have the following documentation for getting the globalContext. But not the formContext.

We obtain the formContext by just calling Xrm.Page in the new Unified UI (or parent.Xrm.Page in Web UI) within a separat html/javascript resource. Even the code snippet for getting the globalContext uses this method as a fallback method. I don't know if Microsoft intends to depricate Xrm.Page from these cases as well.