License is listed in the LICENSE file.
In this sample, you will learn how to configure application settings and routes to enable a variety of Dynamics 365 Commerce SDK features.
We can find the application settings file in \SampleAppSettings\src\settings\app.settings.json. This json file contains a "config" property where we can add or remove settings. In this sample, we will add the "hideRating" setting which hides user ratings for products when enabled.
{
"config": {
"hideRating": {
"friendlyName": "Hide rating",
"description": "This settings hides the rating for products across the site",
"type": "boolean",
"default": false,
"group": "Ratings and reviews"
}
}
}For this step, we'll need to create page mocks to view the changes that occur when hideRating is set to true and when it is set to false. We will create the first page mock hide-rating-false.json in \SampleAppSettings\src\pageMocks\ and add the following code.
{
"appContext": {
"config": {
"hideRating": false
}
}
}Similarly, in the same directory, we will create another file called hide-rating-true.json and add the code below.
{
"appContext": {
"config": {
"hideRating": true
}
}
}We can now view the differences in the page mocks by starting the Node server. To do so, navigate to \SampleAppSettings\ in a CLI and run the following CLI command.
yarn start
Once the Node server is running, open the following URLs in a browser.
https://localhost:4000/page?mock=hide-rating-false
https://localhost:4000/page?mock=hide-rating-true
The product rating should appear as seen in the screenshot below when hideRating is set to false.
Likewise, when hideRating is set to true, the product rating should no longer appear on the page similar to the following screenshot.
Routes are used to add navigation to other pages through the use of buttons, links, and images. Similarly to app settings, routes can also be configured in \SampleAppSettings\src\settings\app.settings.json.
In this routes sample, we will add a cart route to app.settings.json with the following code.
"routes": {
"cart": {
"friendlyName": "Cart Page Route",
"description": "Cart Page Route"
}
}Next, we will create a sample page mock called cart-route.json in \SampleAppSettings\src\pageMocks\ which contains the following code.
{
"appContext": {
"routes": {
"cart": { "destinationUrl": "/modern/cart", "type": "internalLink" }
}
}
}We will now create a new module that will consume the routes API that we have previously added. In a CLI, navigate to the \src\modules\ directory and use the following command to create a new module called "read-app-settings".
yarn msdyn365 add-module read-app-settings
The CLI command will generate a file called read-app-settings.view.tsx in \SampleAppSettings\src\modules\read-app-settings\ which we will replace with the following code.
/*!
* Copyright (c) Microsoft Corporation.
* All rights reserved. See LICENSE in the project root for license information.
*/
import * as React from 'react';
import { IReadAppSettingsViewProps } from './read-app-settings';
export default (props: IReadAppSettingsViewProps) => {
// Displays the cart route as plain text from the app settings.
return (
<div className='row'>
<div className='row'>Cart route from app settings: {props.context.app.routes.cart.destinationUrl}</div>
</div>
);
};We can view the route referenced in the read-app-settings module by running the Node server and navigating to the page mock in a browser.
In a CLI, navigate to \SampleAppSettings\ and execute the following command.
yarn start
Once the Node server is running, navigate to the following URL.
https://localhost:4000/page?mock=cart-route
The cart route should be shown on the page similar to the following screenshot.
The integration test cases for this sample can be tested in a browser by navigating to \SampleAppSettings\ in a CLI and executing the following sample command.
yarn testcafe chrome .\test\hide-rating-true.test.ts -s .\
The software may include third party images and videos that are for personal use only and may not be copied except as provided by Microsoft within the demo websites. You may install and use an unlimited number of copies of the demo websites., You may not publish, rent, lease, lend, or redistribute any images or videos without authorization from the rights holder, except and only to the extent that the applicable copyright law expressly permits doing so.