Adding JavaScript and CSS to Pages

Developers might like to be able to add javascript and css to a SimpleContent page, for example you may want to build some application with html, javascript, and css that talks to a custom web api. Often SPA (Single Page Applications) have very little html and most of the functionality comes from javascript. You can easily put the required html into the content using the source view of the editor. You could perhaps add scripts and css there but it would not be ideal. Typically css should go at the top of the page in the head element and javascript should go at the very bottom of the page.

SimpleContent makes it easy to add javascript and css to pages, but since it is an advanced feature for developers, it is disabled by default. To enable the feature you can add a configuration setting in appsettings.jsonlike this:

"PageEditOptions": {
"AlwaysShowDeveloperLink": false,
"DeveloperAllowedRole": "Administrators"
 }

You could make it always show the developer tools button for anyone who has edit permission, or you can specify a role name, and if the user can edit and is also in the specified role he will see the developer tools button on the edit page.

Clicking the button will go to the Developer Tools page.

Note that you can specify the environment for each javascript or css file, Any means always add the file, Development means only add the file when the Environment is set to Development, and Production means only add the file when the Environment is set to production. This allows you for example to use unminified/unbundled files for development while using minified/bundles files in production.

Note that by default the environment is always Production unless specifically set to a different environment. In Visual Studio, this is set in the launchsettings.json file to Development.