Additional menu choices in Site Studio

There have been a few times when I've found it necessary to add some additional choices to the Actions menu for content in Contribution Mode on a Site Studio page. The Actions menu normally displays choices like Document Info, Switch Content, and View Web Site Usage Report which are controlled by the site designer as to which are available. But sometimes there may be cases in which you want to customize and add additional choices. For my latest project, I needed to add an additional choice to clone the web content. The new menu choice was to go to the service provided by the NewItem component for cloning content.

Site Studio custom action menu

It turns out it's not too difficult to add additional action choices to the menu. There is even a hook in the resource include designed for adding new items. And if you don't want to take the custom component route, you can even add new choices dynamically through JavaScript that can be added to the page template, subtemplate, or region template.

First, the component approach. You first want to create a new component and add a new HTML resource include. You want to use the 'ss_region_extra_actions' resource to hook in your additional actions. Here is an example:


<@dynamichtml ss_region_extra_actions@>
[[% This will add an extra menu option in Site Studio contribution mode %]]
<$include super.ss_region_extra_actions$>
,{
action: "clone",
caption: "Clone item"
}
<@end@>

You of course can add multiple entries and surround them with logic on when to show them as such. Notice that it includes the <include super. designation so that other instances of this resource will be included as well.

Then, you want to add the function that the action will call. For this, there are several resources you could hook into. I chose the 'ss_contribution_mode_action_scripts' one. And here is an example of what the function will look like:


<@dynamichtml ss_contribution_mode_action_scripts@>
<$include super.ss_contribution_mode_action_scripts$>

<script type="text/javascript">
WCM.CONTRIBUTOR.Clone = function(regionConfig)
{
$D().log('CloneContent', window);

var cgiUrl = window.location.protocol + '//' + window.location.host + WCM.ToString(regionConfig['httpCgiPath']);
var suffix = '?IdcService=CHECKIN_NEW_ITEM';
suffix += '&dID=' + WCM.ToString(regionConfig['dataFileID']);
suffix += '&xWebsiteSection=';

// window.location.href="cgiUrl" + suffix;
window.open(cgiUrl + suffix, "_blank");
}
</script>
<@end@>

So again, we're adding the <include super. to include other instances of the resource include. Then notice that in our menu script, the action was named 'clone', but in our function it is named 'Clone'. There is logic that will take the first letter of the action name and uppercase it when looking for the function. So be sure to follow that naming scheme. Then in your function, you can perform whatever action you need.

The other approach you can take is to include JavaScript within a template to dynamically add the menu choice that way. So then it is done client-side instead of UCM adding it when it renders the page.

Basically, you want to include the section that adds the action function mentioned above. Then you'll want a function that dynamically adds the menu choice. And then be able to call it after the page has finished loading. Here is an example of what it all looks like:


<script type="text/javascript">
if (typeof(wcmMenu) == 'undefined') {
wcmMenu = {};
}

(function() {
var oldEvt = window.onload;
window.onload = function()
{
if (oldEvt) oldEvt();
wcmMenu.init();
}
})();

wcmMenu.init = function()
{
var getTargs = window.setInterval (function()
{
if(document.getElementById("wcm_banner_table"))
{
clearInterval(getTargs)
for (var i = 0; i < WCM.CONTRIBUTOR.regions.length; i++)
{
var actions = WCM.CONTRIBUTOR.GetRegionConfig(i).actions;
actions[actions.length] = {action:"test",caption:"Test Menu Item"}
}
}
}, 300);
}

WCM.CONTRIBUTOR.Test = function(regionConfig)
{
alert("Test menu selection in region " + regionConfig.regionName + " was clicked")
}
</script>

Finally, you'll want to wrap that code in an if statement to only display when you are in contribution mode. So that would look like:


<!--$if SSContributor and isTrue(SSContributor)-->
...
<!--$endif-->

Now you can either add that to your page template itself, place it in a region template, or subtemplate to strategically include it when needed that way. For an example of this as a subtemplate, you can download one

here
.

Comments:

Very nice! I'll give it a try. What do you think are the pros and cons of implementing a custom component versus Javacript implementation for adding additional menu choices in Site Studio?

Posted by Terry J. Leach on July 01, 2010 at 07:10 AM CDT #

Hey Terry, Well, I would say the biggest factor is if the menu choice is need on all of the sites and all of the pages. Or just on certain ones. If you take the component approach, then all of your sites, existing and new, will take on the new menu change. There is no need to change or modify your templates. But if you only want it in certain places, then the JavaScript approach would be the way to go. Another pro to the JavaScript approach is you don't have to be the system administrator to implement it. There is no need to load a component and restart the server which some web administrators don't have the permission to do. So this method lets them modify the menus themselves without changes to the server.

Posted by kyle.hatlestad on July 02, 2010 at 01:26 AM CDT #

hello i try this solution and i've got this error: "Offset in runtime evaluation is at line 69 and character 81. Unable to find value for specific lookup parameter 'ssNavNodeList.nodeId'. " thank you for any advice

Posted by a on September 02, 2010 at 07:08 PM CDT #

I'm not entirely sure. Perhaps you are on an earlier version of the Site Studio component? This was tested on the latest Site Studio 10gR4 patch release build that was available at that time.

Posted by kyle.hatlestad on September 07, 2010 at 07:49 AM CDT #

no ..i use Site Studio 10gR4

Posted by a. on September 09, 2010 at 07:09 PM CDT #

Well, since it appears to be a javascript error, I would suggest using a tool such as Firebug in Firefox or the development tools in Chrome to try and debug the error.

Posted by kyle.hatlestad on September 10, 2010 at 02:04 AM CDT #

Great post Kyle! Would both approches work with SSXA as well?

Prashant

Posted by Prashant B. on October 18, 2011 at 12:57 PM CDT #

Hey Prashant,

No, I'm afraid this only works with Site Studio sites being rendered through UCM. I don't believe it's possible to customize the menus for the Actions menu through SSXA.

Thanks,
-Kyle

Posted by Kyle Hatlestad on October 19, 2011 at 04:52 AM CDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

Kyle Hatlestad is a Solution Architect in the WebCenter Architecture group (A-Team) who works with WebCenter Content and other products in the WebCenter & Fusion Middleware portfolios. The WebCenter A-Team blog can be found at: https://blogs.oracle.com/ ateam_webcenter/

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today