Objet externe Fullcalendar ne s'affiche pas en page d'accueil

J’ai créer un objet externe pour afficher le calendrier des réservations des ressources.
Ce calendrier, accessible via le menu s’affiche très bien :

A la demande des utilisateurs, j’ai voulu mettre ce même calendrier sur la page d’accueil de l’application. J’ai donc déclaré une zone de type Page externe faisant appel à l’objet externe : [EXPR:HTMLTool.getExternalObjectURL(“CrbGdrResaAgendaDir”)]
Le calendrier ne s’affiche pas :

et j’ai le message d’erreur suivant dans la console :
Uncaught ReferenceError: onload_functions is not defined
at eval (eval at globalEval (jquery.js:2), :1:1)
at eval ()
at Function.globalEval (jquery.js:2)
at ua (jquery.js:3)
at n.fn.init.append (jquery.js:3)
at n.fn.init. (jquery.js:3)
at K (jquery.js:2)
at n.fn.init.html (jquery.js:3)
at Simplicite.UI.View.Main.setContent (engine.js:1007)
at Simplicite.UI.Engine. (engine.js:528)

J’ai requalifié votre post en “Support” en attendant d’en savoir plus car je pense que vous ne faites pas les choses comme il faut.

Par exemple, selon la manière dont est développé votre objet externe, il n’est pas impossible qu’il ne s’affiche pas correctement quand il est affiché dans une zone de vue de la UI responsive (alors qu’en tant que simple objet externe il s’affichera bien car il sera mis dans une iframe pour compatibilité descendante)

Bref, merci de nous fournir le paramétrage de votre vue et de ses zones ainsi que le paramétrage et le code de votre objet externe pour qu’on regarde ce que vous avez fait et qu’on vous apporte le support ad hoc

Ci joint les documents demandés :

Déclaration de l’objet Externe :

Script de l’objet externe :
CrbGdrResaAgendaDir.display = function(params) {
this.appendCSSIncludes(HTMLTool.fullcalendarCSS());
this.appendJSIncludes(HTMLTool.fullcalendarJS(this.getGrant().getLang()));
// le service est passé en paramètre au SCRIPT de génération du calendrier pour pouvoir filtrer au moment du search
var service=this.getGrant().getParameter(“CRB_SERVICE”);
return HTMLTool.border(“<div id="resacalendar">”) +
HTMLTool.jsBlock(
“onload_functions.push(function() {” +
this.getName() + “.display('”+service+“',"” + HTMLTool.getFormURL(“CrbGdrResa”, “agenda_CrbGdrResa”, “ROWID”, true) + “");” +
“});”
);
};

Ressource SCRIPT de l’objet externe :
//-----------------------------------------------------------
// Client side JavaScript for agenda des réservations
//-----------------------------------------------------------

CrbGdrResaAgendaDir = (function($) {

var $s, debug = false;

function display(service,url) {
	$s = new Simplicite.Ajax();
	var resa = $s.getBusinessObject("CrbGdrResa", "agenda_CrbGdrResa");
	$j("#resacalendar").fullCalendar({
	    customButtons: {
        	addEventButton: {
            	text: "Créer une réservation",
            	click: function() {
          			if (typeof parent.$ui !== "undefined")
						parent.$ui.displayForm(null, "CrbGdrResa", "", { nav: "add" });
            	}
        	}
        },
		header: {
			left: "prev,next today",
			center: "title,addEventButton",
			right: "month,agendaWeek,agendaDay"
		},
		timezone: "local",
		defaultView: "agendaWeek",
		groupByDateAndResource: true,
		editable: true,
		firstDay: 1,
		minTime: "06:00:00",
		maxTime: "22:00:00",
		businessHours: {
			dow: [ 1, 2, 3, 4, 5 ],
			start: '08:00',
			end: '20:00'
		},
		dayClick: function(date, jsEvent, view) {
		    alert('Clicked on: ' + date.format());
			parent.$ui.displayForm(null, "CrbGdrResa", "", { nav: "add" });
		},	
		eventClick: function(e) {
			if (debug) console.log("Réservations " + e.id + " clicked");
			if (typeof parent.$ui !== "undefined")
				parent.$ui.displayForm(null, "CrbGdrResa", e.id, { nav: "add" });
			else
				document.location.replace(url.replace(/ROWID/, e.id));
		},
		eventResize: function(e) {
			var end = e.end.format( "YYYY-MM-DD HH:mm:ss");
			if (debug) console.log("Réservation " + e.id + " redized to " + end);
			e.data.gdrReasaDtFin = end;
			resa.update(function() {
				e.data = resa.item;
				if (debug) console.debug("Réservation " + e.data.gdrResaNum + " date end updated to " + s);
			}, e.data);
		},
		eventDrop: function(e) {
			var s = e.start.format( "YYYY-MM-DD HH:mm:ss");
			var end = e.end.format( "YYYY-MM-DD HH:mm:ss");
			if (debug) console.log("Réservations " + e.id + " dropped to " + s);
			e.data.gdrResaDtDebut = s;
			e.data.gdrResaDtFin = end;
			resa.update(function() {
				e.data = resa.item;
				if (debug) console.debug("Réservations " + e.data.gdrResaNum + " delivery date updated to " + s);
			}, e.data);
		},
		events: function(start, end, tz, callback) {
			var f = "YYYY-MM-DD HH:mm:ss Z";
			var dmin = start.format(f);
			var dmax = end.format(f);
			if (debug) console.debug("Calendar view range = " + dmin + " to " + dmax);
			resa.setFieldValue("gdrResaSite_fk",1);
			resa.search(function() {
				if (debug) console.debug(resa.list.length + " réservations trouvées pour "+service+" entre " + dmin + " et " + dmax);
				var evts = [];
				for (var i = 0; i < resa.list.length; i++) {
					var item = resa.list[i];
					if (item.gdrResaDtDebut !== ""&&item.gdrResaRessource_fk__gdrRessourceTypeAff=="SERVICE"&&item.gdrResaRessource_fk__gdrRessourceAff.includes(service)) { // ZZZ When using intervals empty values are included !
						var s = moment(item.gdrResaDtDebut);
						var e = moment(item.gdrResaDtFin);
						evts.push({
							id: item.row_id,
							data: item,
							title: item.gdrResaDemandeur + "\n" + item.gdrResaSite_fk__gdrSiteLibelleCourt + "\n " +
									item.gdrResaType_fk__gdrTypeLibelle + " : "+item.gdrResaRessource_fk__gdrRessourceLibelle,
							start: s,
							end: e,
							editable: item.gdrResaStatut == "VALIDE" || item.gdrResaStatut == "ATTENTE_VALIDATION",
							durationEditable: false,
							color: item.gdrResaType_fk__gdrTypeLibelle == "Voiture" ? "green" : (item.gdrResaType_fk__gdrTypeLibelle == "Bureau" ? "blue" : "red"),
							borderColor: "lightgray",
							textColor: "white"
						});
					}
				}
				if (debug) console.debug(evts.length + " resa displayed between " + dmin + " and " + dmax);
				callback(evts);
			}, { gdrResaDtDebut: dmin + ";" + dmax, gdrResaStatut: "VALIDE;ATTENTE_VALIDATION;REFUSE" }, { inlineDocs: false });
		}
	});
}

return { display: display};

})(jQuery);

Vue :

Zones :

est-ce-que vous avez pu regarder d’ou vient le problème ?

Non désolé je n’ai pas encore eu le temps de préparer un exemple paramétrage adapté à la UI responsive dans ce cas particulier. Je vais m’en occuper aujourd’hui ou demain.

En attendant, comme vous avez une approche de page standalone à la mode de la UI legacy, vous pouvez toujours la mettre dans une <iframe> sur vos vues.

L’objet externe de la démo “Calendrier des commandes” a été refactoré pour montrer comment on implémente un fullcalendar dans les 2 cas de la UI legacy (logique de pages standalones) et de la UI responsive (logique one page)

C’est aussi décrit de manière plus générale dans ce document https://www.simplicite.io/resources/documentation/01-core/externalobject-code-examples.md

Je reviens vers vous pour la bonne manière d’embarquer un fullcalendar sur une vue de la UI responsive

j’ai importé le module de demo, le calendrier ne s’affiche pas.

j’ai l’erreur suivante :

2018-04-06 10:50:39,856 ERROR [com.simplicite.util.ScriptedObjectDB] SIMPLICITE|http://Test-sim:10028/test_rqu|/test_rqu|ERROR|designer|com.simplicite.util.ScriptedObjectDB|applyConstraints||Evénement: Error at constraint evaluation
javax.script.ScriptException: org.mozilla.javascript.EcmaError: ReferenceError: “__constraint_wrapper” n’est pas défini (MDImage#1) in MDImage at line number 1
at de.christophkraemer.rhino.javascript.RhinoScriptEngine.eval(RhinoScriptEngine.java:239)
at de.christophkraemer.rhino.javascript.RhinoScriptEngine.eval(RhinoScriptEngine.java:255)
at javax.script.AbstractScriptEngine.eval(AbstractScriptEngine.java:233)
at com.simplicite.util.ObjectDB.applyConstraints(ObjectDB.java:1226)
at com.simplicite.util.ObjectDB.applyFieldConstraints(ObjectDB.java:1320)
at com.simplicite.util.ScriptedObjectDB.applyFieldConstraints(ScriptedObjectDB.java:1550)
at com.simplicite.util.ObjectContext.apply(ObjectContext.java:209)
at com.simplicite.webapp.ObjectContextWeb.apply(ObjectContextWeb.java:278)
at com.simplicite.webapp.ObjectPrint.printone(ObjectPrint.java:324)
at com.simplicite.webapp.ObjectPrint.print(ObjectPrint.java:288)
at com.simplicite.webapp.servlets.ui.BusinessObjectServlet.service(BusinessObjectServlet.java:458)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:742)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at com.simplicite.webapp.filters.AuthMethodFilter.doFilter(AuthMethodFilter.java:109)
at com.simplicite.webapp.filters.AbstractFilter.doFilter(AbstractFilter.java:37)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:198)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:496)
at com.simplicite.tomcat.valves.APISessionValve.invoke(Unknown Source)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:140)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:81)
at org.apache.catalina.valves.AbstractAccessLogValve.invoke(AbstractAccessLogValve.java:650)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:87)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:342)
at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:803)
at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66)
at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:790)
at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1459)
at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
at java.lang.Thread.run(Thread.java:748)
Caused by: org.mozilla.javascript.EcmaError: ReferenceError: “__constraint_wrapper” n’est pas défini (MDImage#1)
at org.mozilla.javascript.ScriptRuntime.constructError(ScriptRuntime.java:4198)
at org.mozilla.javascript.ScriptRuntime.constructError(ScriptRuntime.java:4176)
at org.mozilla.javascript.ScriptRuntime.notFoundError(ScriptRuntime.java:4266)
at org.mozilla.javascript.ScriptRuntime.getNameFunctionAndThis(ScriptRuntime.java:2451)
at org.mozilla.javascript.Interpreter.interpretLoop(Interpreter.java:1313)
at org.mozilla.javascript.Interpreter.interpret(Interpreter.java:815)
at org.mozilla.javascript.InterpretedFunction.call(InterpretedFunction.java:109)
at org.mozilla.javascript.ContextFactory.doTopCall(ContextFactory.java:405)
at de.christophkraemer.rhino.javascript.RhinoScriptEngine$1.superDoTopCall(RhinoScriptEngine.java:93)
at de.christophkraemer.rhino.javascript.RhinoScriptEngine$1.doTopCall(RhinoScriptEngine.java:86)
at org.mozilla.javascript.ScriptRuntime.doTopCall(ScriptRuntime.java:3508)
at org.mozilla.javascript.InterpretedFunction.exec(InterpretedFunction.java:120)
at org.mozilla.javascript.Context.evaluateReader(Context.java:1293)
at de.christophkraemer.rhino.javascript.RhinoScriptEngine.eval(RhinoScriptEngine.java:229)
… 38 more

Je vous ai instancié une instance à jour sur master avec la démo et dessus et ça marche:

https://j46b7e9593.demo.simplicite.io/ui designer/designer

Bon, pour utiliser un objet externe fullcalendar sur une vue c’est standard (en responsive en tout cas car en legacy c’est un peu plus subtil car il faut gérer correctement le cas “embedded”) mais il y avait un pb de styles CSS sur la classe calendar.

Le pb de CSS a été corrigé et l’instance https://j46b7e9593.demo.simplicite.io/ui à été mis à jour (ca sera mis à disposition ce soir sur le template master)

A titre d’exemple, on a ajouté le calendrier de la demo sur la home page du domaine demo, ça donne ça:

Quand est-ce-que la prochaine release sera propagée ?
j’ai aussi des soucis avec les publications pour générer un pdf. Ca ne fonctionne par sur l’environnement de dev qui est sur la branche realease. Par contre, en important mon module sur notre environnement de test qui est sur la branche master, ça fonctionne.

On envisage de pousser master sur release début de semaine prochaine.