nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

Adding YUI Widgets Using Webscripts

stevericker

Hello All,

We're adding a YUI widget (a treeview) as a dashlet. But we have some questions as to how to do this correctly using webscripts. There seem to be several examples of similar things built into Share, but we get lost as we try to plow through all the technologies that are involved (e.g., YUI, Freemarker, webscripts, Share).

Here's what we've tried:

- Built a webscript called "treenav" (treenav.get.desc.xml, *.get.html.ftl, *.get.head.ftl, *.get.js)
- Made the <family> a dashlet in the descriptor
- Added all the YUI treeview javascript code to the response template, treenav.get.html.ftl (see below)

<html>
<head>
</head>
<body>

Test dashlet
<div id="treeDiv1">gee</div>

<script type="text/javascript">//<![CDATA[

var tempobject = [ { type: "text", label: "node1" } ];

//instantiate the TreeView control:
var tree = new YAHOO.widget.TreeView("treeDiv1", tempobject);

//render it
tree.draw();

//]]></script>

</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

- Registered it
- Added the dashlet to a dashboard
- It works (the YUI treeview shows up)

Here's one question:

- It doesn't seem like adding the javascript to the response template (*.get.html.ftl) is all that elegant (and kind of messes up the MVC pattern)
- But the YUI treeview seems to need its target (the <DIV> tag where the treeview will go) before being instantiated
- So putting the javascript in the controller (treenav.get.js) or in a client side file (treenav.js) doesn't seem to work
- Is there a more correct way to do this?

Here's another question:

- We want to try to get some user site information while we're building the treeview in the response template (treenav.get.html.ftl)
- When we try to use "remote.call" in our javascript, we get the error "remote is not defined" (in Firebug)
- But the remote object seems accessible per http://wiki.alfresco.com/wiki/Surf_Platform_-_Freemarker_Template_and_JavaScript_API#remote?
- Is it not possible to use the root object "remote" within javascript embedded in the response template?

And a final, more general, question:

- Let's say, from our controller script, we put data in our model root object
- How can we access that model root object data from our response template w.o. using a Freemarker interpolation (${somedata})?
- In particular, if we have javascript in our response template, can we get access to the model root object?

Hopefully this is not too longwinded. But any help on the above would be really appreciated and would really help us as we try to continue to figure out how best to use the platform (by the way, we're using Alfresco Share 3.2r community w. Tomcat). It seems like our troubles and questions are probably due to some misunderstandings we have about webscripts.

Thank you!

Find more posts tagged with

Comments

pqr

Hi steve

Ans 1
To follow MVC pattern better, put your YUI treeview, in the client side .js file.

And it doesnt work for you – then please confirm that, your changes in *.js files do reflect *-min.js file as Share will consider minified javascript file.(This might be one reason)

Ans 3

I am not sure,,,, but I dont think you can use model object in javascript,,

stevericker

Niketa,

Thanks for your help. Unfortunately putting the YUI treeview javascript code into the client side *.js file (and into *-min.js while adding <script> references to those files in *.get.head.ftl) causes this error in Firebug (where the offending command is "tree.draw()" and "treenav" is our code, not YUI code):

H is null
anonymous()          treeview-min.js (line 8)
treenav.js()         treenav.js (line 37)
[Break on this error] }else{H.expand();H=(H.children.length||n…&&!C.isFunction(this[E])){this[E]=G[E];\n
                     treeview-min.js (line 8)
‍‍‍‍‍‍

It seem like the problem is that *.js gets executed in the <head> of the rendered page before the <div> tag in the <body> is defined, so there ends up being no place for YUI to put the treeview?

I'm not sure if the treeview widget is somehow special, but I see that there are other YUI widgets being used throughout Share w.o. any trouble. I took the beginner's approach and just tried to slap up a YUI widget like I would outside of a Surf/Share/webscript application.

Thanks in advance for any other thoughts.

zaizi

Take a look at the other examples in Share. You can use the YUILoaderHelper to fire once the required script files are loaded and elements are available.

Alfresco.util.ComponentManager.register(this);
Alfresco.util.YUILoaderHelper.require(["button", "menu", "container"], this.onComponentsLoaded, this);‍‍

The javascript in *.get.js get executed within Alfresco server. The remote.call method is available there. It is not available in browser client side javascript. Although they are both javascript files, they are executed in two completely different contexts and the functions / objects available to them are completely different.

In your client side javascript define a javascript object with a constructor. In your response template initialise your custom object like you've initialised the tree. When it is initalised in the client side your code can call back to Alfresco webscript to fetch data model for the tree (or this can be included in the constructor).

stevericker

Zaizi,

Thank you very much for your suggestions and comments. Real helpful that you spelled out that the javascript "remote.call" is only available with server side javascript, which for us would be the controller script of the webscript that is our new dashlet (and not available from any client side javascript including script that we embed within our response template).

Your last suggestion worked. We put the constructor in our client side *.js file (which we then add to *.get.head.ftl):

var tempobject = [ { type: "text", label: "node1" } ];

//instantiate the TreeView control:
var tree = new YAHOO.widget.TreeView("treeDiv1", tempobject);
‍‍‍‍‍‍

For our response template, we just define the element (<DIV>) and then render (initialize?) the tree within some embedded script:

<html>
    <head>
    </head>
    <body>

    Test dashlet
    <div id="treeDiv1">tree</div>

    <script type="text/javascript">//<![CDATA[

    //render it
    tree.draw();

    //]]></script>

    </body>
    </html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This is probably just a mental block but the problem is that we still can't think of a way to access Share server information (like a list of all of the Share sites)? Here're the things we tried that DON'T work:

- from our response template (*get.html.ftl), using javascript, tried to access "remote.call" (which doesn't work for the reasons you explained)
- also from our response template (*.get.html.ftl), using javascript, tried to access the model (model.somevariable as populated from the controller)

Our constructor for the treeview is essentially still on the client side (now in a *.js file which is included via *.get.head.ftl as mentioned above). So it's still not clear how we could get access to "remote.call" or the model from there? The only way it seems that the model can be accessed is via Freemarker (which would make sense because the Freemarker engine is server side)? If that's the case though, we can't seem to pass that information back to any client side javascript (which is where all the YUI widget configuration is happening).

We tried to look at some of the examples but couldn't see anything where server side javascript root objects (for example remote.call) needed to be passed to client side javascript. Most of the examples (like the my-sites webscript/dashlet) seem to pass the model to the Freemarker template (not javascript embedded in that). We also looked at some YUI widgets (like buttons) but those seem to have some kind of Alfresco "wrapper" around them and have special constructors (like Alfresco.util.createYUIButton). There doesn't seem to be something like that for a treeview. (We're still investigating YUILoader / YUILoaderHelper.)

I guess the basic question now boils down to: how do you pass server side information (where you have access to a big API) over to client side javascript (when building a Share dashlet)?

Darn, are we just missing something basic in our understanding? Thanks again.

mikeh

The key part you're missing is to populate the client-side JavaScript object by getting Freemarker to generate the code.
For example, documentlist.get.html.ftl is similar to:

<script type="text/javascript">//<![CDATA[
   new Alfresco.DocumentList("${args.htmlid}").setOptions(
   {
      siteId: "${page.url.templateArgs.site!""}",
      containerId: "${template.properties.container!"documentLibrary"}",
      usePagination: ${(args.pagination!false)?string},
      showFolders: ${(preferences.showFolders!false)?string},
      simpleView: ${(preferences.simpleView!false)?string},
      highlightFile: "${page.url.args["file"]!""}",
      vtiServer: ${vtiServer}
   }).setMessages(
      ${messages}
   );
//]]></script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍

As you can see, the client-side Alfresco.DocumentList class is being passed parameters through the setOptions() function; parameters which are generated at runtime via Freemarker directives; in turn populated either by the Surf framework or from the web-tier controller script documentlist.get.js. Parameters page.*, template.* and args.* are examples of the former, preferences.* and vtiServer the latter.

Thanks,
Mike

zaizi

Two options.

Option 1:
In your server side controller javascript get a list of Share sites, etc. and other information using objects / functions available. See http://wiki.alfresco.com/wiki/JavaScript_API. Add them to the model and in your freemarker add pass them through to the client side javascript constructor.

In *.get.head.ftl


var shareSites = [{ "sites": <#list sites as site>"${site.name}" <#if site_has_next>,</#if></#list> } ];

var tempobject = [ { type: "text", label: "node1" } ];

//instantiate the TreeView control:
var tree = new YAHOO.widget.TreeView("treeDiv1", tempobject, shareSites);

‍‍‍‍‍‍‍‍‍‍

This lets you pass the information from the model to the client side javascript. The Freemarker template prints out the model.

This easy and is pretty static in the sense the user will have to refresh the page to list any new sites.

Option 2:
You use client javascript code to call a remote Alfresco web script to load the information in dynmically. This is more work. YUI provides Connection Manager (http://developer.yahoo.com/yui/connection/) for these purposes. Alfresco provide a nice wrapper utility to call web scripts more easily. The following example client side javascript function does an AJAX call to a webscript to get a list of events for the Calendar.

      _loadData: function()
      {
         Alfresco.util.Ajax.request(
         {
            url: Alfresco.constants.PROXY_URI + "calendar/eventList",
            dataObj:
            {
               "site": this.siteId
            },
            successCallback:
            {
               fn: this.onDataLoad,
               scope: this
            },
            failureMessage: Alfresco.util.message("load.fail", "Alfresco.CalendarView")
         });
      },
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

stevericker

Mike and Zaizi,

Thanks a ton! Both those solutions seem really powerful and straightforward:

- Populate client-side JavaScript using Freemarker (which has access to the model)
- From client-side JavaScript, obtain server side information through a data webscript

…The light bulb finally turned on inside! I'll study the examples as well. Thanks again.

zladuric

I can only agree with Steve, this really lit the bulb above my head! Is something this simple and explanatory available on the wiki? Didn't see it till now.

Anyway, I have an additional question regarding js.
I would like to do a remote call or an AJAX call to the repo from share, but I'm having problems with my arguments passing. I made a .json.ftl webscript in /alfresco, which takes a GET argument (site name) and returns some custom metadata as JSON. Now, when I call it via /alfresco directly, it works. But when I call the webscript from Share I get the following error in the logs
"…freemarker.core.InvalidReferenceException: Expression companyhome.childByNamePath["Sites/"+args.company+"/documentLibrary"] is undefined on line 3, column 8 in…"
Now, I don't understand what I'm doing wrong. Can you please post an example of a remote call with an argument passed correctly?

stevericker

Zlatko,

Could you post the code? I've done a lotta trial and error stuff and maybe it's something that I've come across.

Steve

zladuric

The docprops.get.json.ftl (in /alfresco) looks like:

{
"dokumenti" : [
<#list companyhome.childByNamePath["Sites/"+args.company+"/documentLibrary"].children as child>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "name" : "${jsonUtils.encodeJSONString(child.properties.name)}" ,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "nodeRef" : <#if child.isContainer>"FOLDER"<#else>"${jsonUtils.encodeJSONString(child.nodeRef)}"</#if>,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "clientUser" : "${child.properties["custom:prop1]}",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "clientPay" : ${child.properties["custom:prop2"]}"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<#if child_has_next>, </#if>
</#list>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]
}
‍‍‍‍‍‍‍‍‍‍‍‍‍

I just changed the names of custom model namespace and prop from the original script.
When I call it directly ( http://server

ort/alfresco/service/sample/docprops.json?company=testtvrtka ) I get a valid JSON in response.
When I call it via remote call ( var data = connector.get("/sample/docprop.json?tvrtka=testtvrtka"); var result = eval ('('+data+')'); ) catalina.out shows the error. So, I guess I'm not sending the argument properly, but I don't know how else to form the call.

mikeh

Could you post the docprops.get.desc.xml please?

Thanks,
Mike

zladuric

Yes, here:

<webscript>
<shortname>Document Property</shortname>
<description>Get doc properties for Share Upload dashlet</description>
<default>json</default>
<url>/sample/docprop.json</url>
<authentication>user</authentication>
<transaction>required</transaction>
</webscript>
‍‍‍‍‍‍‍‍‍

It is not the auth thing, I tried actually manually writting a json in the response, then I can get the result. It is just the argument passing that bugs me.

mikeh

This: var data = connector.get("/sample/docprop.json?tvrtka=testtvrtka");
Should be this: var data = connector.get("/sample/docprop.json?company=testtvrtka");

Thanks,
Mike

zladuric

Hi Mike,

Thanks again. Anyway, I changed the argument name in the /alfresco script, but it's still not processing the argument:

Caused by: freemarker.core.InvalidReferenceException: Expression companyhome.childByNamePath["Sites/"+args.tvrtka+"/documentLibrary"] is undefined on line 3, column 8 in org/alfresco/sample/docprop.get.json.ftl.‍

Can you please point me to an example of how to past GET or POST argument from /share server-side .js or client .js to /alfresco webscript? I tried this in various ways, didn't work.

mikeh

There are loads of examples throughout the Share source code, e.g.

      var connector = remote.connect("alfresco");
      result = connector.get("/slingshot/doclib/container/" + siteId + "/" + containerId + "?type=" + toRepoType(appType));
      if (result.status == 200)
      {
         var data = eval('(' + result + ')');
         containerType = data.container.type;
      }
‍‍‍‍‍‍‍‍

From config/alfresco/templates/org/alfresco/documentlibrary.js

Thanks,
Mike

zladuric

Hi mike,

Well, this still doesn't work:

var connector = remote.connect("alfresco");
      result = connector.get("/sample/docprop.json?tvrtka=" + model.site );
      if (result.status == 200)
      {
         var data = eval('(' + result + ')');
         model.docprop = data["dokumenti"];
}‍‍‍‍‍‍‍

I stripped the webscript to just return the name and nodeRef, and it still doesn't work.
When I call it like this:

http://localhost:8080/alfresco/service/sample/docprop.json?tvrtka=testtvrtka‍

I get a valid json, when I call it through the remote.connect, it triggers the error:

Caused by: freemarker.core.InvalidReferenceException: Expression companyhome.childByNamePath["Sites/"+args.tvrtka+"/documentLibrary"] is undefined on line 3, column 8 in org/alfresco/sample/docprop.get.json.ftl.
‍‍

It's like a wall, can't get through it.

stevegreenbaum

I just found this post and had already started working on a different approach. Is there a third method to make the data available to the YUI widget? I am trying to use Stringify in the controller and then JSON.parse in the HTML .FTL response template. Does this seem feasible? I tried it, but the JSON.parse doesn't complete successfully. Wasn't sure if I didn't implement the stringify correctly or if this just doesn't make sense.

var tempobject = [ { type: "text", label: "node1" } ];
x = json.stringify (tempobject);
model.x = x;

In the template:
jsonObject= JSON.parse(${x});

stevericker

Hi Steve,

I'm not sure you have access to the model (model.x) in the script portion of your template–the model really is for the Freemarker engine I think. So you can try some of the tricks Mike and Zaizi mentioned (like using a ${x.property} Freemarker construct but within your HTML code). It doesn't feel super elegant but that's what a templating engine does I guess (purely just substitutes). Otherwise you can turn your server-side code maybe into a webscript (like Zaizi said) and then call your webscript right from the javascript portion of your template (which would be client-side).

Hope that helps a bit.

Steve

mikeh

var tempobject = [ { type: "text", label: "node1" } ];
x = json.stringify (tempobject);
model.x = x;

In the template:
jsonObject= JSON.parse(${x});

Sorry, hadn't spotted this post until steve r replied… I use that pattern in the DocLib webscripts

model.x = jsonUtils.toJSONString(tempobject);‍

YUI is effectively doing the JSON.parse() part in the DataSource code, so that should work ok as you've got it.

Thanks,
Mike