Hi Eric,

If you're overriding the JS as a one-off change specific to a given site, you should be able to place the module.config in the root of the website . The default location for the extended dojo JS files would be /wwwroot/ClientResources though you can change that if you want to. There's a bit more info here (under "Application default module"):
https://docs.developers.optimizely.com/content-management-system/docs/configuring-moduleconfig#application-default-module

If the change you're making is likely to be something you want to package and roll out to other sites, it would be worth considering making it a module as described here:
https://docs.developers.optimizely.com/content-management-system/docs/developing-add-ons 

Hello Eric,

What Paul said is the correct way to introduce a custom javascript file.

You need to add the file reference to the <dojo> section of the module.config file.

I assume you will add this as a descriptor for some properties. You may need to add a custom EditorDescriptor to your project to do this. Inside the EditorDescriptor, you have to add the reference of your file as the ClientEditingClass. That is how CMS knows to load your logic when showing the property in the CMS UI. You should fill the ClientEditingClass with respect to the path you set in the dojo section of your module.config file.

Suppose, you are loading all files from a certain folder in the dojo. then add the reference like this - 

<dojo>
    <paths>
        <add name="custom" path="path_to_the_folder_from_wwwroot" />
    </paths>
</dojo>

Then, add this in the ModifyMetadata method of the EditorDescriptor.

SelectionFactoryType = typeof(YourSelectionFactory);
ClientEditingClass = "<path-to-your-js-file-via-dojo>";
base.ModifyMetadata(metadata, attributes)

How would this be done in a development domain when running localhost from IISExpress and Visual Studio? I have over 50 projects in the solution and a lot of wwwroot folders. I tried adding it to the VS episerver project without luck. does ClientResources go in the StartUp wwwroot?

It should work the same way in IISExpress though the reference to IISExpress makes me wonder what version of the CMS you're using. The locations I mentioned assume it's CMS 12, it would be slightly different for CMS 11 as you wouldn't have the wwwroot folder. From memory, it would be "ClientResources" in the root of the site though don't quote me on that.

I think you'd need both the JavaScript and the module.config in your main web project (i.e. the one set as your startup project).

I think the ClientResource should be inside the wwwroot folder of the startup project.

Let me provide a simpler example of how to define paths for some javascript.

Suppose, you have a sample 'test.js' file. you put in the wwwroot/ClientResources/Scripts folder.

This is how you can reference this in module.config.

<clientResources>
	<add name="epi-cms.widgets.base" path="~/ClientResources/Scripts/test.js"  resourceType="Script" />
</clientResources>

Make sure to not change the name attribute to anything else. I did because the AI tools suggested me and was stuck for two days.

After you build your project and hard-reload the page in the edit view, you will find the file appearing under the marked ClientResources folder. My files are inside a folder titled "editors". that is why the path is like this.

Here is what I have.

I get an error in the browser console that it can't find the js file. The path of the file it can't find is: https://localhost:44300/ClientResources/Scripts/Editors/ColorEditor

EPi.Admin is the startup project. Under wwwroot I created the ClientResouces/Scripts folder and placed the js and config files there.

module.config has this.

<clientResources>
    <add name="epi-cms.widgets.base" path="~/ClientResources/Scripts/ColorEditor.js"  resourceType="Script" />
</clientResources>

the descriptor file has this.

ClientEditingClass = "/ClientResources/Scripts/ColorEditor";

usage is like this.

[UIHint(ColorEditorDescriptor.UIHint)]

Hello Eric,

The module.config file should be at the root of the project, along with Startup.cs and Program.cs files.

Thank you. This helped. It is now finding module.config.

I'm still getting the error in the console about not being able to find the js file.

Console Errors:

Failed to load resource: the server responded with a status of 404 (Not Found) -> https://localhost:44300/ClientResources/Scripts/ColorEditor.js
Failed to load resource: the server responded with a status of 404 (Not Found) -> https://localhost:44300/ClientResources/Scripts/ColorEditor

public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
{
    //ClientEditingClass = "alloy/Editors/ColorEditor";

    ClientEditingClass = "/ClientResources/Scripts/ColorEditor";
    this.EditorConfiguration["predefinedColors"] = _predefinedColors.GetPredefinedColors(metadata.PropertyName, metadata.ContainerType.Name);
    base.ModifyMetadata(metadata, attributes);
}

Here is the new module.config

<?xml version="1.0" encoding="utf-8"?>
<module>
  <clientResources>
    <add name="epi-cms.widgets.base" path="~/ClientResources/Scripts/ColorEditor.js"  resourceType="Script" />
  </clientResources>
</module>

Hello Eric,

Looks like the issue here is that the ModifyMetadata method is not finding the file via dojo. To do this, We need to modify the module.config file a bit more.

The ClientEditingClass field recognizes the path relative to the dojo. So, we need to register the Scripts folder in the module.config with an alias. Assuming we are using the alias "alloy" for the "Scripts" folder, the file should look like this -

<?xml version="1.0" encoding="utf-8"?>
<module>
  <clientResources>
    <add name="epi-cms.widgets.base" path="~/ClientResources/Scripts/ColorEditor.js"  resourceType="Script" />
  </clientResources> <!-- this is redundant now I think, as the ModifyMetadata in EditorDescriptor will load the file. -->
  <dojo>
    <paths>
      <add name="alloy" path="Scripts" />
    </paths>
  </dojo>
</module>

Now. in the ModifyMetadata method, add this -

ClientEditingClass = "alloy/ColorEditor";

This allows you to load the file you intended.

You can find more information on how the dojo path mapping works here - https://docs.developers.optimizely.com/content-management-system/docs/configuring-moduleconfig#dojo