satya - Tue Nov 20 2012 15:28:26 GMT-0500 (Eastern Standard Time)

The jsrender termplate file for widgets is in the control folder

The jsrender termplate file for widgets is in the control folder

Control files hold important files that critical for the functionality of the framework.

satya - Tue Nov 20 2012 15:32:50 GMT-0500 (Eastern Standard Time)

The following files are now part of the default inner master page

<script type="text/javascript" src="/akc/js/jquery.js">
</script>
<script type="text/javascript" src="/akc/js/json2.js">
</script>
<script type="text/javascript" src="/akc/js/jsrender.js">
</script>
<script type="text/javascript" src="/akc/js/akc-xmltojson.js">
</script>
<script type="text/javascript" src="/akc/js/akc-widget.js">
</script>

satya - Tue Nov 20 2012 15:57:00 GMT-0500 (Eastern Standard Time)

You need to add this to the inner master page as well

/*
**************************
* support for widgets
**************************
*/
.akc_expand
{
    display:none;
    border:orange solid 2px;
}

At the moment this is in my personal master page.

satya - Tue Nov 20 2012 16:01:23 GMT-0500 (Eastern Standard Time)

Here is the parent folder widget code

<div class="akc_expand" type="folderWidget">
        <folder_id>347</folder_id>
</div>

satya - Tue Nov 20 2012 16:02:12 GMT-0500 (Eastern Standard Time)

Do one for taggedMenuWidget

<div class="akc_expand" type="taggedMenuWidget">
        <tagnames>menu1,menu2</tagnames>
</div>

satya - Wed Nov 21 2012 12:10:13 GMT-0500 (Eastern Standard Time)

The keys are lowercased when I create xml to json

The keys are lowercased when I create xml to json

satya - Wed Nov 21 2012 12:11:26 GMT-0500 (Eastern Standard Time)

Here is a sample xml you could expect from aspire server side

<?xml version="1.0" encoding="UTF-8"?>
<AspireDataSet>
   <tagnames>android</tagnames>
   <url>getFoldersForTagsURL</url>
   <profile_user_email>satya@activeintellect.com</profile_user_email>
   <aspire.loops.folders>true</aspire.loops.folders>
   <aspire_output_format>object-xml</aspire_output_format>
   <profile_user_first_name>Satya</profile_user_first_name>
   <profile_aspire_loggedin_status>true</profile_aspire_loggedin_status>
   <profile_user_last_name>Komatineni</profile_user_last_name>
   <aspirecontext>akc</aspirecontext>
   <profile_user>satya</profile_user>
   <folders>
      <row>
         <f_relationship_id>83</f_relationship_id>
         <folder_name>CS-JavaScript</folder_name>
         <folder_id>63</folder_id>
         <f_tagname>android</f_tagname>
         <f_tagid>4053</f_tagid>
         <f_tag_owner_userid>satya</f_tag_owner_userid>
      </row>
   </folders>
</AspireDataSet>

satya - Wed Nov 21 2012 12:12:22 GMT-0500 (Eastern Standard Time)

The keys of json for this will be

tagnames
url
....etc
folders - an array

satya - Wed Nov 21 2012 12:13:27 GMT-0500 (Eastern Standard Time)

I also add a node called inputDivData

tagnames
url
....etc
folders - an array
..
inputDivData - an array

satya - Wed Nov 21 2012 12:14:28 GMT-0500 (Eastern Standard Time)

Here is an example of menu widget div

<div class="akc_expand" type="taggedMenuWidget">
        <tagnames>menu1,menu2</tagnames>
        <menuHeader>menuname</menuHeader>
</div>

satya - Wed Nov 21 2012 12:15:18 GMT-0500 (Eastern Standard Time)

For this the inputDivData will be

....Aspireset goes here
inputDivData - an array
  tagnames
  menuheader

notice the lowercasing...

satya - Wed Nov 21 2012 12:26:38 GMT-0500 (Eastern Standard Time)

Here is an example of jsrender template

<div class="menu">
<p class="header">{{:inputDivData.menuheader}}</p>
{{for folders}}
<p><a href="/akc/display?url=NotesIMPTitlesURL&downerUserId={{:f_tag_owner_userid}}&folderId={{:folder_id}}&order_by_format=news">
{{:folder_name}}</a></p>
{{/for}}
</div>

of course you may want to check for an empty loop with an if statement and print the output accordingly!

satya - Wed Nov 21 2012 12:28:55 GMT-0500 (Eastern Standard Time)

Here is how you code for that div definition

/*
******************************************************
* Expected div structure

<div class="akc_expand" type="taggedMenuWidget">
        <tagnames>menu1,menu2</tagnames>
        <menuHeader>menuname</menuHeader>
</div>

* <div
* Future architecture may move this in
******************************************************
*/
function akcExpand_taggedMenuWidget_function(divObject)
{
    //alert("I am in taggedmenuwidget");
    //Get the inner html of your div
    var expandDivData = $(divObject).html();
    dataxml = "<root>" + expandDivData + "</root>";
    dataxmlobj = $.parseXML(dataxml);
    var dataObj = AKC.getJSONAtNode(dataxmlobj,"root");
    //alert(JSON.stringify(dataObj));

    var dataUrl = "/akc/display?url=getFoldersForTagsURL&tagnames=android&aspire_output_format=embedded-xml";
    var templateUrl =  "/akc/display?url=DisplayNoteBodyURL&reportId=4058";
    
    var menuWidget = new AKC.AkcWidget(dataUrl,templateUrl,divObject,dataObj);
    //populate the menu widget
    menuWidget.populate();
}

satya - Wed Dec 19 2012 10:50:33 GMT-0500 (Eastern Standard Time)

My notes on jsrender can be found at

My notes on jsrender can be found at

satya - Wed Dec 19 2012 10:51:07 GMT-0500 (Eastern Standard Time)

My notes on jquery can be found at

My notes on jquery can be found at