Deploying the webresources
- For the DependantOptionSet code to work we need to also create a config file that defines which child optionsets are filtered by which parent values, so create an xml file in the js folder called
<DependentOptionSetConfig entity="account" >
label="Freight Terms" />
label="No Charge" />
You solution should look like the following:
- Next we need to enable deploying the webresources. In the previous part we installed spkl and added the DependentOptionSet webresources. If you've not done this, I suggest you go and review Part 1.
- Adding the config xml with spkl is really easy, simply add the new file to the spkl.json file:
- You can now deploy by running the
spkl\deploy-webresources.bat at the command-line.
Since we installed 'Open Command Line' in the previous part, we can simply select the spkl folder in Visual Studio and press Alt-Space to open the command prompt!
Testing inside Dynamics
Now that we've deployed the webresources, we can configure it for use on the Account form.
- Open the Account Form inside Dynamics Form designer. I find this easiest to do from your App in the designer:
- Select Form Properties and add the
DependentOptionSet.js to the Form Libraries:
- Add a new OnLoad Event Handler that calls the
SDK.DependentOptionSet.init function with the Parameters (including the quotes)
- Locate the Shipping Method field on the form, and add a new On Change handler calling
SDK.DependentOptionSet.filterDependentField with the parameters
- These steps are simply necessary to wire up the code to the form events. If you save the form and publish you should now see the Shipping Method drop down filter the Freight Terms based on the configuration xml.
Debugging TypeScript with Fiddler
- Install Fiddler2 from https://www.telerik.com/download/fiddler Run Fiddler.Select Tools->Options->HTTPS and select Decrypt HTTPS traffic.
- Click Yes when prompted to Trust the Fiddler Root certificate, and then Yes to each subsequent dialog.
- Click OK on the Options Dialog. This allows Fiddler to decrypt the HTTPS traffic between the browser and the server so that it can intercept it, log and respond with a different file where needed.
- In Fiddler select Rules->Performance->Disable Caching. This will ensure that files are not stored locally in the browser cache, but downloaded with each page refresh to pick up the latest version
- In Fiddler Select the AutoResponder tab and select 'Enable rules' and 'Unmatched requests passthrough'
Click Add Rule
Note: Adjust the path to your own project location
- Click Save
- You should see a grey highlighted request for the files that match – which is now redirecting to your local file.
- When you refresh your page, you can now make changes to your local TypeScript which will recompile to a local js file and picked up without a re-deploy and re-publish.
Debugging TypeScript with Source Maps
- In Fiddler AutoResponders, use Add Rule
- Set the Rule to be:
This now will pick up the locations in the source map and redirect to your local folder.
is redirected to