Add Magnolia MainBar functionalities with Ajax

Your Rating:

Results:

9

rates

Magnolia MainBar is one of the "green bar" present almost in every page of a website.

It has by default 3 buttons:

- Preview
- AdminCentral
- Page Info (on the right)

How can you add functionalities to that bar? One way (for sure not the only) is to add a custom button which can call a modal window which let you add whatever you want.

In this example we use jQuery and JSP but it can be done with every modal window system you like and maybe using a custom tag-lib / freemarker utility.

First, add the button to the bar to your JSP page:

<%
Content currentPage = Resource.getActivePage();
BarMain bar=new BarMain(request);
//path is needed for the links of the buttons
bar.setPath(currentPage.getHandle());
//"paragraph" specifies the paragraph evoked by the "Properties" button
bar.setParagraph("pageProperties");
// initialize the default buttons (preview, site admin, properties)
// note: buttons are not placed through init (see below)
bar.setDefaultButtons();
// to overwrite single properties of the default buttons, use getButtonXXX() methods:
// bar.getButtonProperties().setLabel("Page properties");
//add customized buttons to the main bar
Button mwButton = new Button();
mwButton.setOnclick("showModalWindow();");
mwButton.setLabel("Actions");
List<Button> rightButtonList = new LinkedList<Button>();
rightButtonList.addAll(bar.getButtonsRight());
rightButtonList.add(mwButton);
bar.setButtonsRight(rightButtonList);
// places the preview and the site admin button to the very left and the properties button to the very right
bar.placeDefaultButtons();
//draw the main bar
bar.drawHtml(out);
%>

In the modal window now you can add Ajax functionalities with normal AjaxRequest

$.getJSON(jsonUrl, jsonParams, function(jsonResponse){
  alert ("hello");
  //  ... do what you want here
});

In Magnolia you have to enable an ajax responder. You can do quickly placing a JSP page in docroot dir otherwise you can add a custom servlet into the servlet filters.
In our projects we started to add a JSON responder, the code is the following:

<%@ page contentType="text/html" %>
<%@ page pageEncoding="UTF-8" %>

<%@ taglib prefix="c" 		uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" 		uri="http://java.sun.com/jsp/jstl/functions" %>

<%@ taglib prefix="cms" 	uri="cms-taglib" %>
<%@ taglib prefix="cmsfn" 	uri="http://www.magnolia.info/tlds/cmsfn-taglib.tld" %>
<%@ taglib prefix="cmsu" 	uri="cms-util-taglib" %>

<!-- Common prismaInterface settings -->
<c:set var="jsonCallback" 	value="${param.jsonCallback}" />
<c:set var="jsonMethod" 	value="${param.jsonMethod}" />
<c:set var="mgnlUserName" 	value="${param.mgnlUserName}" />

<c:choose>
	<c:when test="${jsonMethod == 'newArticle'}">
		<c:set var="articleName" value="${param.articleName}" />
		<c:set var="articleSection" value="${param.articleSection}" />
		<c:set var="articlePath" value="${param.articlePath}" />

		<xhr:newArticle var="newArticleUrl"
						articleName="${articleName}"
						articleSection="${articleSection}"
						articlePath="${articlePath}" />

		${jsonCallback}({
			"success"		: "true",
			"newArticleUrl"		: "${newArticleUrl}",
			"reasonOfFailure"	: ""
		})
	</c:when>
	<c:otherwise>
		${jsonCallback}({
			"success"			: "false",
			"newArticleUrl"		: "",
			"reasonOfFailure"	: "unknown method"
		})
	</c:otherwise>
</c:choose>

These are sample screenshots (website is in italian, sorry):

1) red button

2) dialog window (only 1 action available for a "section" page: create one article; with JS/Jquery toggle we display a dialog window with form fields for article properties: name, date, and so on..

3) article has been created and a link is displayed

4) on article page, the same dialog window open with different options enabled, in this case we can activate directly that article on public instance

5) at the end, we decided to move the trigger button (the red one) outside the green main bar, because user without enough privileges (in our custom privileges settings) do not display the main bar, so they would loose also the article creation feature, still available on author instance.

That's it!

Hope it helps..
Matteo

Add Magnolia MainBar functionalities with Ajax

Labels

Comments (1)

Matteo Pelucco says: