Customizing Alfresco for demo purposes

Sometimes users require not a product but a solution to their problem. If Alfresco Share itself is showed, they can fly away from the main target because of the richness of the interface. In this case we are focusing our presentation in Alfresco search capabilities, so any other elements should be cut off.

Login screen

Replacing Alfresco logo and changing Login button color can help to avoid product identification at first sight.

alfresco-login-customized

Below required files are detailed, based on an Alfresco SDK AMP Share project.

/src/main/amp/config/alfresco/web-extension/site-data/extensions/hide-elements.xml

<extension>
	<modules>
		<module>
			<id>Hide Elements Module</id>
			<customizations>
				<customization>
					<targetPackageRoot>org.alfresco.components</targetPackageRoot>
					<sourcePackageRoot>es.keensoft.components</sourcePackageRoot>
				</customization>
			</customizations>
			<auto-deploy>true</auto-deploy>
		</module>
	</modules>
</extension>

/src/main/amp/config/alfresco/web-extension/site-webscripts/es/keensoft/components/head/resources.get.html.ftl

<@markup id="custom-login-resources" action="after" target="resources">

   <link rel="stylesheet" type="text/css"
    href="${url.context}/res/login/customizations/components/head/resources.css" >
   </link>

</@markup>

/src/main/resources/META-INF/login/customizations/components/head/resources.css

.theme-company-logo {
    background: url("images/keensoft.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    height: 141px !important;
    width: 304px !important;
}

.form-fields.login .form-field > span.yui-button {
	border-color: #2598d0 !important;
}
.form-fields.login .form-field > span.yui-button > .first-child {
	border-color: #2598d0 !important;
	background-color: #2598d0 !important;
}

/src/main/resources/META-INF/login/customizations/components/head/images/keensoft.png

keensoft

Header and footer

Alfresco Share header and footer should be hidden to avoid unwanted options.

Modify /src/main/amp/config/alfresco/web-extension/site-data/extensions/hide-elements.xml in order to include header and footer overriding.

<extension>
	<modules>
		<module>
			<id>Hide Elements Module</id>
			<components>
				<component>
					<scope>global</scope>
					<region-id>footer</region-id>
					<source-id>global</source-id>
					<sub-components>
						<sub-component id="default">
							<url>/keensoft/components/hide-footer</url>
						</sub-component>
					</sub-components>
				</component>
				<component>
					<scope>global</scope>
					<region-id>header</region-id>
					<source-id>global</source-id>
					<sub-components>
						<sub-component id="default">
							<url>/keensoft/components/hide-header</url>
						</sub-component>
					</sub-components>
				</component>
			</components>
			<customizations>
				<customization>
					<targetPackageRoot>org.alfresco.components</targetPackageRoot>
					<sourcePackageRoot>es.keensoft.components</sourcePackageRoot>
				</customization>
			</customizations>
			<auto-deploy>true</auto-deploy>
		</module>
	</modules>
</extension>

/src/main/amp/config/alfresco/web-extension/site-webscripts/es/keensoft/components/hide-footer.get.desc.xml

<webscript>
    <shortname>Hide Footer</shortname>
    <url>/keensoft/components/hide-footer</url>
    <family>keensoft</family>
</webscript>

/src/main/amp/config/alfresco/web-extension/site-webscripts/es/keensoft/components/hide-footer.get.head.ftl

<@link rel="stylesheet" type="text/css" href="${page.url.context}/res/resources/hide.css" />

/src/main/amp/config/alfresco/web-extension/site-webscripts/es/keensoft/components/hide-footer.get.html.ftl

Empty

/src/main/amp/config/alfresco/web-extension/site-webscripts/es/keensoft/components/hide-header.get.desc.xml

<webscript>
    <shortname>Hide Header</shortname>
    <url>/keensoft/components/hide-header</url>
    <family>keensoft</family>
</webscript>

/src/main/amp/config/alfresco/web-extension/site-webscripts/es/keensoft/components/hide-header.get.head.ftl

<@link rel="stylesheet" type="text/css" href="${page.url.context}/res/resources/hide.css" />

/src/main/amp/config/alfresco/web-extension/site-webscripts/es/keensoft/components/hide-header.get.html.ftl

Empty

/src/main/resources/META-INF/resources/hide.css

.sticky-push, .sticky-footer {
	display: none !important;
}

#bd {
	padding-bottom: 0px !important;	
}

.alfresco-header-Header {
	display: none !important;
}

alfresco-hide-header-footer

By now header and footer has been hidden from every page except for aikau pages. Aikau pages are served as a whole component, so we need to perform an override on faceted-search page.

/src/main/amp/config/alfresco/site-webscripts/org/alfresco/share/pages/faceted-search/faceted-search.get.html.ftl

<@processJsonModel group="share"/>
<@link rel="stylesheet" type="text/css" href="${page.url.context}/res/resources/hide.css" />

Navigation

Finally we are focusing our demo on faceted search, so we want the user login directly to that page. Including a web filter for an initial redirection should do the trick.

/src/main/java/es/keensoft/share/filter/SearchFilter.java

package es.keensoft.share.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.extensions.surf.site.AuthenticationUtil;

// Unordered filter
@WebFilter(urlPatterns={"/page/*"})
public class SearchFilter implements Filter {
	
	public static String SESSION_ATTRIBUTE_KEY_REDIRECTED = "_alf_REDIRECTED";
	
	@Override
	public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) 
            throws IOException, ServletException {
		
		HttpServletRequest request = (HttpServletRequest) req;
		HttpServletResponse response = (HttpServletResponse) resp;
                HttpSession session = request.getSession();
        
		String userId = AuthenticationUtil.getUserId(request);
        
		if (checkAgreement(request, userId)) {
        	    session.setAttribute(SESSION_ATTRIBUTE_KEY_REDIRECTED, Boolean.TRUE);
		    response.sendRedirect(request.getContextPath() + "/page/dp/ws/faceted-search");
		} else {
    		    chain.doFilter(req, resp);
		}

	}
	
	private boolean checkAgreement(HttpServletRequest request, String userId) {
		
                HttpSession session = request.getSession();
        
		boolean userLoggedIn = AuthenticationUtil.getUserId(request) != null;
		
		boolean previouslyRedirected = 
				session.getAttribute(SESSION_ATTRIBUTE_KEY_REDIRECTED) != null && 
				(Boolean) session.getAttribute(SESSION_ATTRIBUTE_KEY_REDIRECTED);
		
		return (userLoggedIn && !previouslyRedirected);

	}
	
	@Override
	public void init(FilterConfig config) throws ServletException {}

	@Override
	public void destroy() {}
}

In order to use a @WebFilter annotation, you need Tomcat 7 or higher and including a dependency in your pom.xml

<dependencies>
    <!-- @WebFilter available since servlet 3.0 (Tomcat 7) -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>3.0.1</version>
        <scope>provided</scope>
    </dependency>
    ...
</dependencies>

Conclusion

Now we have the demo entering directly to Alfresco faceted search and we can explain it deep without any distraction.

alfresco-hide-faceted-search

3 comentarios en “Customizing Alfresco for demo purposes

  1. Excellent tutorial ! just another question, what to do if we want to hide the footer ONLY in an Aikau page like faceted search?

    Keep up the good work!

  2. Apply ONLY two of these configurations to hide only footer in faceted search Aikau page:
    /src/main/amp/config/alfresco/site-webscripts/org/alfresco/share/pages/faceted-search/faceted-search.get.html.ftl
    /src/main/resources/META-INF/resources/hide.css

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s