November Happy Hour will be moved to Thursday December 5th.

Dojo component Template.html not loading

Vote:
 

I have a custom dojo component with a Template.html file. It seems to be trying to load the Template file from /Episerver/Shell rather than from my component location.

Files are in wwwroot as follows:

DateTextBoxUtc.js

define('Epik/Editors/DateTextBoxUtc/DateTextBoxUtc', [
		'dojo/_base/array',
		'dojo/_base/connect',
		'dojo/_base/declare',
		'dojo/_base/lang',
		'dijit/_CssStateMixin',
		'dijit/_Widget',
		'dijit/_TemplatedMixin',
		'dijit/_WidgetsInTemplateMixin',
		'dijit/dijit', // loads the optimized dijit layer
		'dijit/Calendar',
		'dijit/form/DateTextBox',
		'dijit/form/ValidationTextBox',
		'dojo/text!./Template.html',
		'epi/epi'
	],
	function(
		array,
		connect,
		declare,
		lang,
		_CssStateMixin,
		_Widget,
		_TemplatedMixin,
		_WidgetsInTemplateMixin,
		dijit,
		Calendar,
		DateTextBox,
		TextBox,
		template,
		epi
	) {

		return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin],
			{
				templateString: template,

				postCreate: function() {
					this.set('value', this.value);
					this.dateInputWidgetTextbox.set('value', this.value);

					// Init textarea and bind event
					this.connect(this.dateInputWidgetTextbox, 'onClick', this._onbutton);
					this.connect(this.dateInputWidgetCalendar, 'onValueSelected', this._onCalendar);
					this.connect(this.dateInputWidgetTextbox, 'onKeyPress', this._onTextAreaPress);
					this.connect(this.dateInputWidgetTextbox, 'onBlur', this._onChange);
				},

				_onIntermediateChange: function(event) {
					if (this.intermediateChanges) {
						this._set('value', event.target.value);
						this.onChange(this.value);
					}
				},

				// Setter for value property
				_setValueAttr: function(value) {
					this.dateInputWidgetTextbox.set('value', value);
					this._set('value', value);
				},

				// Setter for intermediateChanges
				_setIntermediateChangesAttr: function(value) {
					this.dateInputWidgetTextbox.set('intermediateChanges', value);
					this._set('intermediateChanges', value);
				},

				// Event handler for textarea
				_onbutton: function() {
					this.dateInputWidgetCalendar.set('style', 'display:block!important');
				},

				_onCalendar: function(date) {
					var dd = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
					this.dateInputWidgetTextbox.setValue(dd);
					this._updateValue(this.dateInputWidgetTextbox.value);
					this.dateInputWidgetCalendar.set('style', 'display:none!important');
				},

				_onTextAreaPress: function() {
					this._set('value', this.dateInputWidgetTextbox.value);
					this._updateValue(this.dateInputWidgetTextbox.value);
					this.dateInputWidgetCalendar.set('style', 'display:block!important');
				},

				_onChange: function() {
					this._set('value', this.dateInputWidgetTextbox.value);
					this._updateValue(this.dateInputWidgetTextbox.value);
				},

				onChange: function(value) {

				},

				// updates the value and tells epi to save
				_updateValue: function(value) {
					if (epi.areEqual(this.value, value)) {
						return;
					}

					this._set('value', value);
					this.onChange(value);
				}
			});
	});

module.config

<?xml version="1.0" encoding="utf-8" ?>
<module>
	<dojo>
		<paths>
			<add name="Epik" path="Scripts" />
		</paths>
	</dojo>
	<clientResources>
		<add name="epi-cms.widgets.base" path="Scripts/Editors/DateTextBoxUtc/Template.html" />
		<add name="epi-cms.widgets.base" path="Scripts/Editors/DateTextBoxUtc/DateTextBoxUtc.js" resourceType="Script" />
	</clientResources>
	<clientModule>
		<moduleDependencies>
			<add dependency="Shell" type="RunAfter" />
			<add dependency="CMS" type="RunAfter" />
		</moduleDependencies>
	</clientModule>
</module>

I'm referencing the Template.html in the js file by using "'dojo/text!./Template.html" as it is in the same folder. Is this not the correct way to be referencing the template file?

#323146
Jun 05, 2024 8:38
Vote:
 

Hi,

It seems module.config is problem

You can change as following:

<?xml version="1.0" encoding="utf-8" ?>
<module  clientResourceRelativePath="~/ClientResources">
	<dojo>
		<paths>
			<add name="Epik" path="Scripts" />
		</paths>
	</dojo>
	<clientResources>
		<add name="epi-cms.widgets.base" path="Scripts/Editors/DateTextBoxUtc/Template.html" />
		<add name="epi-cms.widgets.base" path="Scripts/Editors/DateTextBoxUtc/DateTextBoxUtc.js" resourceType="Script" />
	</clientResources>
	<clientModule>
		<moduleDependencies>
			<add dependency="Shell" type="RunAfter" />
			<add dependency="CMS" type="RunAfter" />
		</moduleDependencies>
	</clientModule>
</module>

OR

<?xml version="1.0" encoding="utf-8" ?>
<module>
	<dojo>
		<paths>
			<add name="Epik" path="ClientResources/Scripts" />
		</paths>
	</dojo>
	<clientResources>
		<add name="epi-cms.widgets.base" path="ClientResources/Scripts/Editors/DateTextBoxUtc/Template.html" />
		<add name="epi-cms.widgets.base" path="ClientResources/Scripts/Editors/DateTextBoxUtc/DateTextBoxUtc.js" resourceType="Script" />
	</clientResources>
	<clientModule>
		<moduleDependencies>
			<add dependency="Shell" type="RunAfter" />
			<add dependency="CMS" type="RunAfter" />
		</moduleDependencies>
	</clientModule>
</module>
#323190
Edited, Jun 06, 2024 10:30
Vote:
 

I've tried both of these module.config changes and it still has the same issue.

Do i need to specify a resourceType for the template?

#323236
Jun 07, 2024 2:40
Vote:
 

It is weird. I mistypo in sencond one and updated it. But I think you do not need to add any thing to <clientResources> section if you use this js file in Editor Descriptor and set client class to this js file already.

Just need to add something as you did if you want to always load your resources whenever loading epi base resources.

The resource should be script or style, the template file is loaded when js file is loaded.

#323238
Jun 07, 2024 7:18
Vote:
 

So the template.html shouldn't be listed in <ClientResources> section? I've removed this but still seeing the same errors. I saw the typo, still not working.

#323239
Edited, Jun 07, 2024 7:36
Vote:
 

Yes, the template.html should not be listed in ClientResources section. It is so weird. Do you stop debugging and re-run again after changing module.config file?

#323244
Jun 07, 2024 8:43
Vote:
 

Yes, i stopped debugging and re-run after making the config change. Still no change.

#323364
Edited, Jun 10, 2024 2:09
Vote:
 

I've found the solution. The template doesn't need to be referenced in the module.config file, and the reference to it in the js file needs to have the path from the webroot rather than a "./" relative path.

i.e. 'dojo/text!/clientresources/scripts/editors/datetextboxutc/template.html',

#325422
Jul 15, 2024 5:18
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.