tag:blogger.com,1999:blog-79544686919088469612024-03-13T15:19:55.521-07:00ecmgeek.dean ECM blogDavid Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.comBlogger30125tag:blogger.com,1999:blog-7954468691908846961.post-88634231771825087932013-10-08T03:28:00.000-07:002014-01-21T06:01:43.967-08:00Alfresco Portlets in LiferayYesterday I wrote a short article about the integration of Alfresco into Liferay. One part of it focused on the Portlets those are part of Alfresco Share. This new article provides some deeper insights.<br />
<br />
Let's assume that you deployed the Alfresco portlets to Liferay. So you now have a new web application ${LIFERAY_HOME}/tomcat/webapps/share (Let's name this path ${SHARE}). Under ${SHARE}/WEB-INF the file which is named 'portlet.xml' can be found. A portlet definition looks as the following one:<br />
<br />
<script src="https://gist.github.com/magicable/8540521.js"></script>
<div>
<br /></div>
<br />
As you can see Alfresco provides a ProxyPortlet class in order to view a Share Web Script. The next interesting file is the one which is named 'liferay-portlet.xml'. It references the ShareMyDocLibs portlet:<br />
<br />
<blockquote class="tr_bq">
<i><liferay-portlet-app><br /> <portlet><br /> <portlet-name>ShareMyDocLibs</portlet-name><br /> <user-principal-strategy>screenName</user-principal-strategy><br /> </portlet><br /> ...<br /></liferay-portlet-app></i></blockquote>
<br />
There is a third configuration file which is named 'liferay-display.xml'. It defines the Alfresco application category:<br />
<br />
<blockquote class="tr_bq">
<i><display><br /> <category name="Alfresco"><br /> <portlet id="ShareMyDocLibs"></portlet><br /> ...<br /> </category><br /></display></i></blockquote>
To access the portlet also a servlet definition in the 'web.xml' configuration file is required:<br />
<br />
<blockquote class="tr_bq">
<i>...<br /> <servlet><br /> <servlet-name>ShareMyDocLibs Servlet</servlet-name><br /> <servlet-class>com.liferay.portal.kernel.servlet.PortletServlet</servlet-class><br /> <init-param><br /> <param-name>portlet-class</param-name><br /> <param-value>org.alfresco.web.portlet.ProxyPortlet</param-value><br /> </init-param><br /> <load-on-startup>1</load-on-startup><br /> </servlet><br />...<br /> <servlet-mapping><br /> <servlet-name>ShareMyDocLibs Servlet</servlet-name><br /> <url-pattern>/ShareMyDocLibs/*</url-pattern><br /> </servlet-mapping></i></blockquote>
<br />
<br />
So in order to include your own Alfresco portlet, it should be sufficient to add the entries to the just mentioned descriptor files. But let's now investigate the ShareMyDocLibs script. It is located at '${SHARE}/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/my-documentlibraries' and just follows the WebScript pattern. (More about WebScripts: <a href="http://ecmgeek.blogspot.de/2012/06/simple-pinboard-dashlet.html">http://ecmgeek.blogspot.de/2012/06/simple-pinboard-dashlet.html</a> ). So it has a descriptor, a controller and in this case an HTML view. Let's create a very simple 'Hello World' Dashlet (Do not mix it up with Portlet: A dashlet is a mini app which is living on Alfresco Share's Dashboard. A Dashlet is also only a Web Script in Share. A Portlet is a mini app which is living in a Portlet Container, like Liferay. An JSR168 portlet can run in other Portlet Containers, too. Unlike Dashlets, Portlets are a kind of standardized. However, Alfresco provides this ProxyPortlet which allows to show Dashlets in Liferay.). So let's start by adding a Dashlet to '/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/dashlets'. Let's name it 'my-liferay-portlet':<br />
<br />
<ul>
<li>Create a WebScript descriptor file 'my-liferay-portlet.get.desc.xml'</li>
</ul>
<div>
<blockquote class="tr_bq">
<i><webscript><br /> <shortname>A simple Liferay portlet</shortname><br /> <description>Says Hello world!</description><br /> <family>site-dashlet</family><br /> <format default="html">extension</format><br /> <url>/components/dashlets/my-liferay-portlet</url><br /></webscript></i></blockquote>
</div>
<div>
<ul>
<li>Create a Freemarker HTML template which has the name 'my-liferay-portlet.get.html.ftl'</li>
</ul>
<div>
<blockquote class="tr_bq">
<i><div><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><h3> My Liferay portlet </h3><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><br/><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><b> ${result} </b><br /></div></i></blockquote>
</div>
</div>
<div>
<ul>
<li>Create a JavaScript controller which sets the model. It should be named 'my-liferay-portlet.get.js'</li>
</ul>
<div>
<blockquote class="tr_bq">
<i>model.result = "Hello world!";</i></blockquote>
<br />
<ul>
<li> Navigate to 'http://localhost:8080/share/service/index' and click on the 'Refresh Web Scripts' button. If this does not work for you, just restart your Liferay installation.</li>
<li> Your Liferay embedded Share is available via 'http://localhost:8080/share/' whereby 'http://localhost:8080' is the URL to reach your Liferay installation. (Further details in my previous article: <a href="http://ecmgeek.blogspot.de/2013/10/how-to-access-alfresco-repository-from.html">http://ecmgeek.blogspot.de/2013/10/how-to-access-alfresco-repository-from.html</a> ). So log-in to Share and add your Dashlet to a Site Dashboard to make sure that it works. The result in Share looks like that (As you can see, I did not add the Alfresco specific Dashlet border because that would look a little bit confusing in Liferay):</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW5Efpv81dPRT_AdXR9SFobOgQcvpBu0cuvGF7varp946UncKp_koX22VCFqNVHuPSx8Onqji5T8ZH18ed0Ry9-LQXqwBuTQzzt3juWHgHNhDVM5JuvmD_HRqWyjdeUFmq73t-6smYFyc6/s1600/dashlet_in_share.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW5Efpv81dPRT_AdXR9SFobOgQcvpBu0cuvGF7varp946UncKp_koX22VCFqNVHuPSx8Onqji5T8ZH18ed0Ry9-LQXqwBuTQzzt3juWHgHNhDVM5JuvmD_HRqWyjdeUFmq73t-6smYFyc6/s1600/dashlet_in_share.png" /></a></div>
<div>
<ul>
<li>Now let's add the Dashlet as a portlet by editing the following files as mentioned above (Just copy the blocks of the ShareMyDocLibs portlet by mapping to the new Web Script's URL. Do not forget to restart your Liferay installation afterwards):</li>
<ul>
<li>liferay-portlet.xml</li>
</ul>
</ul>
<blockquote class="tr_bq">
<i><portlet><br /> <portlet-name>MyLiferayAlfrescoPortlet</portlet-name><br /> <user-principal-strategy>screenName</user-principal-strategy><br /> </portlet></i></blockquote>
<ul><ul>
<li>liferay-portlet.xml</li>
</ul>
</ul>
<blockquote class="tr_bq">
<i><portlet><br /> <description>Alfresco: My Liferay Portlet</description><br /> <portlet-name>MyLiferayAlfrescoPortlet</portlet-name><br /> <portlet-class>org.alfresco.web.portlet.ProxyPortlet</portlet-class><br /> <init-param><br /> <name>viewScriptUrl</name><br /> <value>/page/components/dashlets/my-liferay-portlet</value><br /> </init-param><br /> <supports><br /> <mime-type>text/html</mime-type><br /> <portlet-mode>VIEW</portlet-mode><br /> </supports><br /> <portlet-info><br /> <title>Share: My Document Libraries</title><br /> <short-title>My Document Libraries</short-title><br /> </portlet-info><br /> <security-role-ref><br /> <role-name>administrator</role-name><br /> </security-role-ref><br /> <security-role-ref><br /> <role-name>guest</role-name><br /> </security-role-ref><br /> <security-role-ref><br /> <role-name>power-user</role-name><br /> </security-role-ref><br /> <security-role-ref><br /> <role-name>user</role-name><br /> </security-role-ref><br /> </portlet></i></blockquote>
<ul><ul>
<li>liferay-display.xml</li>
</ul>
</ul>
<div>
<blockquote class="tr_bq">
<i><display><br /> <category name="Alfresco"><br /> <portlet id="ShareMyDocLibs"></portlet><br /> <portlet id="ShareSiteDocLib"></portlet><br /> <portlet id="ShareRepoBrowser"></portlet><br /> <portlet id="MyLiferayAlfrescoPortlet"></portlet><br /> </category><br /></display></i></blockquote>
<br />
<ul><ul>
<li>web.xml</li>
</ul>
</ul>
</div>
<div>
<br /></div>
<ul>
<li>Then add the new portlet to a Liferay page. The resulting portlet looks like that:</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBWvNYRXtPD6UfGbvxV5HR_NKGZ1cznxq4f7M5CvIC4U4A9zhIkWQj8WEMq7Uwc5nTU-wr2K2dmHG0wFHScnHFrnR1P1ZKRCPDFi-bVJ-FzVoRNgkxu7QviQgoTsPmsWuTLukbMBkvTvNW/s1600/dashlet_as_portlet.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBWvNYRXtPD6UfGbvxV5HR_NKGZ1cznxq4f7M5CvIC4U4A9zhIkWQj8WEMq7Uwc5nTU-wr2K2dmHG0wFHScnHFrnR1P1ZKRCPDFi-bVJ-FzVoRNgkxu7QviQgoTsPmsWuTLukbMBkvTvNW/s400/dashlet_as_portlet.png" height="90" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
So finally I can say, that integrating Alfresco with Liferay works good for you if you are an Alfresco Developer. Then Alfresco's ProxyPortlet already solves problems like the authentication via Liferay for you. If you know how to develop Alfresco Dashlets, then you also know how to develop Alfresco Portlets out of the box. I think that I would not recommend to use the existing Portlets like the 'MyDocumentLibraries' one, because it just breaks with Liferay at some points. It forwards you to the Alfresco Document Library and as soon as you click the wrong link, it then forwards you to standalone Share application. So a compromise could be:</div>
</div>
</div>
</div>
<div>
<ul>
<li>Deploy Share to Liferay, but do not use the example Portlets</li>
<li>Create Dashlets for Share those work without back links to the rest of the Share UI</li>
<li>Make these Dashlets available as Portlets in Liferay</li>
</ul>
</div>
<div>
<br /></div>
David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com2tag:blogger.com,1999:blog-7954468691908846961.post-70736905644186569202013-10-07T11:58:00.001-07:002013-10-08T00:34:27.659-07:00How to access the Alfresco repository from Liferay PortalA few years ago I was responsible for some Partner Certfication projects for the database system vendor Ingres. Two of the partners were Alfresco and Liferay. So we investigated how to combine them best. The answer seemed to be a portlet which accesses Alfresco, by just using Alfresco as the Content Repository. A few years later I am now investigating it again from the point of view of a Consultant. So I evaluated some well documented ways to integrate the DMS Alfresco into the Portal System Liferay. The result is not that bad, but not really what I wanted.<br />
<br />
There are basically two approaches. The first one is to embed Alfresco's UI (Alfresco Share) as a Dashlet. This has challenges and raises questions. For instance: What's about permissions within the Content Repository? If you know Alfresco, then you also know that it comes with 2 tiers aka 2 web applications. The application Share is repsobsible to show you the UI, whereby the application Alfresco is used to provide you the repository layer. The interesting part of this story is that it is just possible to deploy the applications seperated. So Alfresco Share is just a WebApp which performs REST to the service layer in order to show some data. Share's endpoint configuration allows you to configure which Alfresco Repository should be used. Exactly this, let's name it feauture, is helpful to integrate Share with Liferay. Basically, the whole Share applications gets deployed to Liferay. Share is then configured to access the repository layer which is hosted somewhere else. Alfresco Share is build on top of the Spring SURF framework. Which means that Web Scripts are used in order to show something (like Dashlets ... do not mix it up with Portlets). So as far as I understood it, several of those UI Web Scripts are made available as Portlets by having a Portlet descriptor within the Share application. This seems to be OK and also has advantages. Another more Portal System like idea would be to have a standard portlet (JSR 168, or maybe one which is a little bit more Liferay specific) which then performs the CMIS call to the underlying repository. The last metioned approach has some disadvantages regarding document focused customizations (So documents can have types with several properties and so on. So the portlet needs to be configured which properties of which document type should be presented to the end user. I guess this can become a kind of complex, and so Alfresco decided to just provide Share itself - which can be easily customized - to realize the portlets.). But to use Share as a Portlet causes another problem. Share requires that the user is authenticated and has a specific role (Site Manager, Site Contributor, ...) within the Alfresco repository in order to access documents. The way how this integration solved it, is to extend the Alfresco configuration by adding an extra external Authentication Subsystem. The Share application which is deployed into Liferay was configured to use this external and Cookie based authentication. When a Liferay user logs in the first time, a new Alfresco user with the same name is created within Alfresco, whereby the authentication itself happens in Liferay and not in Alfresco. I think this sufficient for demonstration or evaluation purposes, but not really an Enterprise scenario. In such a scenario you would have a standalone Alfresco repository which uses an LDAP or AD for authentication purposes. Every LDAP user would be already in Alfresco. So an interesting question would be if this external authentication integrates well with other authentication mechanisms. So the idea is that Liferay has exactly the same users synchronized as Alfresco, and so it is not required to recreate the user in Alfresco. This way, the Alfresco user could be also a kind of preconfigured regarding his/her site memberships in Alfresco. So here are the steps how to embed Alfresco Share into Liferay by accessing the Alfresco remote repository (<a href="https://www.liferay.com/de/web/navin.agarwal11/blog/-/blogs/integration-with-alfresco-4-x-and-liferay-6-1">https://www.liferay.com/de/web/navin.agarwal11/blog/-/blogs/integration-with-alfresco-4-x-and-liferay-6-1</a>):<br />
<br />
<br />
<ul>
<li>We assume that you installed Alfresco and Liferay not in the same Tomcat Application Container. So they have both different port settings. I installed at first Alfresco by choosing port 8081 and then Liferay by keeping port 8080.</li>
<li>In ${LIFERAY_HOME}/tomcat/conf/catalina.properties configure an additional classpath location ${LIFERAY_HOME}/tomcat/shared/classes in order to have a place where you can add Alfresco's overriding configuration files (The XML and property files are used to override the default configuration.). To do so add the following line: shared.loader=${catalina.base}/shared/classes,${catalina.base}/shared/lib/*.jar</li>
<li>In Alfresco's global configuration file ${ALF_HOME}/tomcat/shared/classes/alfresco-global.properties extend the authentication chain by adding the external authentication configuration: </li>
</ul>
<blockquote class="tr_bq">
<i>authentication.chain=alfrescoNtlm1:alfrescoNtlm,external1:external<br />external.authentication.proxyUserName=</i></blockquote>
<div>
<ul>
<li>Copy the share.war file to ${LIFERAY_HOME}/deploy</li>
<li>Copy the folder '${ALF_HOME}/tomcat/shared/classes/alfresco/web-extension' and all it's contents to '${LIFERAY_HOME}/tomcat/shared/classes/alfresco'</li>
<li>Modify the file '${LIFERAY_HOME}/tomcat/shared/classes/alfresco/share-config-custom.xml' in order to configure the endpoints.</li>
</ul>
<div>
<blockquote>
<i><alfresco-config><br /> <!-- Repository Library config section --><br /> <config evaluator="string-compare" condition="RepositoryLibrary" replace="true"><br /> <!--<br /> Whether the link to the Repository Library appears in the header component or not.<br /> --><br /> <visible>true</visible><br /> </config><br /> <config evaluator="string-compare" condition="Remote"><br /> <remote><br /> <endpoint><br /> <id>alfresco-noauth</id><br /> <name>Alfresco - unauthenticated access</name><br /> <description>Access to Alfresco Repository WebScripts that do not require authentication</description><br /> <connector-id>alfresco</connector-id><br /> <endpoint-url>http://localhost:8081/alfresco/s</endpoint-url><br /> <identity>none</identity><br /> </endpoint><br /> <!-- Define a new connector --><br /> <connector><br /> <id>alfrescoCookie</id><br /> <name>Alfresco Connector</name><br /> <description>Connects to an Alfresco instance using cookie-based authentication</description><br /> <class>org.springframework.extensions.webscripts.connector.AlfrescoConnector</class><br /> </connector><br /> <!-- Use the Cookie based authentication by default --><br /> <endpoint><br /> <id>alfresco</id><br /> <name>Alfresco - user access</name><br /> <description>Access to Alfresco Repository WebScripts that require user authentication</description><br /> <connector-id>alfrescoCookie</connector-id><br /> <endpoint-url>http://localhost:8081/alfresco/wcs</endpoint-url><br /> <identity>user</identity><br /> <external-auth>true</external-auth><br /> </endpoint><br /><endpoint><br /> <id>alfresco-feed</id><br /> <name>Alfresco Feed</name><br /> <description>Alfresco Feed - supports basic HTTP authentication via the EndPointProxyServlet</description><br /> <connector-id>http</connector-id><br /> <endpoint-url>http://localhost:8081/alfresco/s</endpoint-url><br /> <basic-auth>true</basic-auth><br /> <identity>user</identity><br /> </endpoint><br /> <endpoint><br /> <id>activiti-admin</id><br /> <name>Activiti Admin UI - user access</name><br /> <description>Access to Activiti Admin UI, that requires user authentication</description><br /> <connector-id>activiti-admin-connector</connector-id><br /> <endpoint-url>http://localhost:8081/alfresco/activiti-admin</endpoint-url><br /> <identity>user</identity><br /> </endpoint><br /> </remote><br /> </config><br /></alfresco-config></i></blockquote>
<br />
<ul>
<li>Restart Alfresco</li>
<li>Restart Liferay</li>
<li>Open Liferay, create a new Page and add a new Application for it. You can see that there is a new Application category which is named Alfresco. These are your Portlets.</li>
<li>BTW: You can find the portlet descriptor (portlet.xml) within Share at ${SHARE}/WEB-INF</li>
</ul>
<div>
The following YouTube video explains the result and the usage best: <a href="http://www.youtube.com/watch?v=On7SfssX8TI">http://www.youtube.com/watch?v=On7SfssX8TI</a></div>
<div>
<br /></div>
<div>
If you know Liferay, then you may think 'Hey, Liferay already has DMS functionality. Why should I use another Content Repository?'. The answer is a statement like 'The right tool for the right job.'. Liferay is a Portal System. It is intended to provide you an unified view to your company's (or organization's) Tools, Documents and Web Content. Alfresco was orignally more a pure Document Management System. The purpose was to provide you easy access to your content/document together with structured information about it. (and other cool features like document oriented workflows, document behaviours, content rules, ...) So even if there was a convergence of the two systems, I would still say: 'Use Liferay for Portals and Intranets and use Alfresco to manage Documents (their Properties, their Life Cycles and the Processes of them)'. So it makes just sense to combine Liferay and Alfresco. But the question 'Why should I not use the Liferay Document Library?' is still valid in the sense of 'Why should Alfresco not be integrated into the Liferay Document Library?'. So the answer is 'It should!' and the following part of this article will show how. There is a very cool feature in Liferay which allows you to just add new CMIS repositories (You can find some details about CMIS in my blog, but it basically means a more or less standardized protocol to access Content Repositories). The way how it should work is described here: <a href="http://www.liferay.com/de/web/alexander.chow/blog/-/blogs/7670631">http://www.liferay.com/de/web/alexander.chow/blog/-/blogs/7670631</a> . Unfortunatly, it was impossible for me to test this feature because Liferay just refused to add my Repo with an error message like 'Please check your repository configuration.'. Maybe it works better in a later version. However, I got it running by adding my CMIS configuration to Liferay's external configuration file. Here are the steps:</div>
<div>
<br /></div>
<div>
<ul>
<li>In '${LIFERAY_HOME}/tomcat/webapps/ROOT/WEB-INF/classes/portal-ext.properties' add the following lines:</li>
</ul>
</div>
<br />
<blockquote class="tr_bq">
<i>## CMIS<br />#<br />dl.store.impl=com.liferay.portlet.documentlibrary.store.CMISStore<br />dl.store.cmis.credentials.username=admin<br />dl.store.cmis.credentials.password=admin<br />dl.store.cmis.system.root.dir=Liferay Home<br />#dl.store.cmis.repository.url=http://localhost:8081/alfresco/cmisatom<br />dl.store.cmis.repository.url=http://localhost:8081/alfresco/service/cmis<br />session.store.password=true<br />company.security.auth=screenName</i></blockquote>
<br />
<ul>
<li>Important is that the screenName is used to authenticate. Alfresco uses normally not the email address as the user name. So the screen name should match the user id.</li>
<li>The CMIS AtomPub service is available via '/alfresco/service/cmis'. With Alfresco 4.x an additional JSON CMIS binding was introduced, and so there is now also the 'alfresco/cmisatom' service.</li>
<li>Log in to Liferay, open the Control Panel, choose the Global settings and add a new root folder which is named 'Liferay Home', then upload a test document.</li>
<li>Open Alfresco Share and navigate to the repository view. You can find a 'Company Home/Liferay Home' folder. </li>
</ul>
<div>
The bad part of the story is that Liferay seems to use the CMIS repository the same way as a file system. It creates some cryptical folder names (maybe internal id-s) and places files with the extension 'bin' inside them. So the documents are not human readable in Alfresco. As far as I understood, this was not really the intend of CMIS (Here a short JavaDoc excerpt of the Java Client OpenCMIS: <a href="http://chemistry.apache.org/java/0.9.0/maven/apidocs/org/apache/chemistry/opencmis/client/api/Folder.html">http://chemistry.apache.org/java/0.9.0/maven/apidocs/org/apache/chemistry/opencmis/client/api/Folder.html</a> ).</div>
<div>
<br /></div>
<div>
So what are the options? There is still the option to develop an own Portlet. It could use CMIS or Alfresco's REST API. Another option is to develop an Alfresco Hook which goes beyond Liferay's CMIS Hook. A Hook (in Liferay) is an extension which uses an existing extension point. As far as I understood it is possible to replace the whole Document Library provider by using an own implementation.</div>
<br />
<br />
<div>
<br /></div>
<div>
What do you think? Any success stories about Alfresco & Liferay integrations?</div>
</div>
</div>
David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com1tag:blogger.com,1999:blog-7954468691908846961.post-88600538525233783252013-10-01T12:32:00.001-07:002013-10-01T12:33:50.537-07:00Custom Share Actions with FormsLet's imagine that you work on a task which should allow you to show a specific form by clicking on an action. So this tutorial shows how to achive this. For demo purposes we use an 'Edit title' action.<br />
<br />
The action could look like the following one and needs to be configured in your 'share-config-custom.xml' file:<br />
<br />
<config evaluator="string-compare" condition="DocLibActions"><br />
<actions><br />
<action id="my-edit" type="javascript" label="Edit title"><br />
<param name="function">onMyEdit</param><br />
</action><br />
</actions><br />
<br />
<actionGroups><br />
<actionGroup id="document-browse"><br />
<action index="101" id="my-edit"/><br />
</actionGroup><br />
</actionGroups><br />
</config><br />
<br />
As you can see there is a JavaScript function bound to this Document Library Action. So we need to include a JavaScript file. Because we are currently focusing on the Document Library we could just override the 'actions-common.get.head.ftl' by copying it to '$TOMCAT_HOME/shared/classes/alfresco/web-extension/site-webscripts/org/alfresco/components/documentlibrary'. There we can see which JS files are already included. One of these files is for instance '${page.url.context}/res/js/documentlibrary-actions-min.js'. So it would be possible to add an addtional <script> tag to this head freemarker template. However, the better way is to use the following configuration in the 'share-config-custom.xml' file:<br />
<br />
<config evaluator="string-compare" condition="DocLibCustom" replace="true"><br />
<dependencies><br />
<js src="components/myactions/actions.js"/><br />
</dependencies><br />
</config><br />
<br />
<br />
In the next step, we have to provide the JavaScript function for the 'my-edit' action . For this purpose we just create a new JavaScript file in '$TOMCAT_HOME/webapps/share/components/myactions/actions.js'. It registers the 'onMyEdit' function.<br />
<br />
(function()<br />
{<br />
<br />
var mydlA_onMyEdit = function(record)<br />
{<br />
var scope = this,<br />
nodeRef = record.nodeRef,<br />
jsNode = record.jsNode;<br />
<br />
// Intercept before dialog show<br />
var doBeforeDialogShow = function mydlA_onMyEdit_doBeforeDialogShow(p_form, p_dialog)<br />
{<br />
// Dialog title<br />
var fileSpan = '<span class="light"> MyEdit </span>';<br />
<br />
//var dialogTitleSuffix = "-dialogTitle";<br />
var dialogTitleSuffix = "-form-container_h";<br />
<br />
Alfresco.util.populateHTML(<br />
[ p_dialog.id + dialogTitleSuffix , fileSpan ]<br />
);<br />
};<br />
<br />
var templateUrl = YAHOO.lang.substitute(Alfresco.constants.URL_SERVICECONTEXT + "components/form?itemKind={itemKind}&itemId={itemId}&destination={destination}&mode={mode}&submitType={submitType}&formId={formId}&showCancelButton=true",<br />
{<br />
itemKind: "node",<br />
itemId: nodeRef,<br />
mode: "edit",<br />
submitType: "json",<br />
formId: "my-edit-form"<br />
});<br />
<br />
// Using Forms Service, so always create new instance<br />
var myEdit = new Alfresco.module.SimpleDialog(this.id + "-myedit-" + Alfresco.util.generateDomId());<br />
<br />
myEdit.setOptions(<br />
{<br />
width: "auto",<br />
templateUrl: templateUrl,<br />
actionUrl: null,<br />
destroyOnHide: true,<br />
doBeforeDialogShow:<br />
{<br />
fn: doBeforeDialogShow,<br />
scope: this<br />
},<br />
onSuccess:<br />
{<br />
fn: function mydlA_onMyEdit_success(response)<br />
{<br />
var successMsg = this.msg("Success!");<br />
<br />
Alfresco.util.PopupManager.displayMessage(<br />
{<br />
text: successMsg<br />
});<br />
},<br />
scope: this<br />
},<br />
onFailure:<br />
{<br />
fn: function mydLA_onMyEdit_failure(response)<br />
{<br />
var failureMsg = this.msg("Failure!");<br />
<br />
Alfresco.util.PopupManager.displayMessage(<br />
{<br />
text: failureMsg<br />
});<br />
},<br />
scope: this<br />
}<br />
});<br />
<br />
myEdit.show();<br />
};<br />
<br />
<br />
YAHOO.Bubbling.fire("registerAction",<br />
{<br />
actionName: "onMyEdit",<br />
fn: mydlA_onMyEdit<br />
});<br />
})();<br />
<br />
What we finally need is to define a form for our custom edit dialog. This happens also by using the configuration file 'share-config-custom.xml':<br />
<br />
<config evaluator="node-type" condition="cm:content"><br />
<forms><br />
<form id="my-edit-form"><br />
<field-visibility><br />
<show id="cm:title" force="true" /><br />
</field-visibility><br />
<appearance><br />
<field id="cm:title"><br />
<control template="/org/alfresco/components/form/controls/textfield.ftl" /><br />
</field><br />
</appearance><br />
</form><br />
</forms><br />
</config> <br />
<br />
Voila! Here a short summary:<br />
<ol>
<li>Define a Share Custom Action which calls JavaScript</li>
<li>Implement a JavaScript function by registering it with a specific action name. The action name in your JavaScript file matches the function parameter in the Share configuration.</li>
<li>Use the 'Alfresco.module.SimpleDialog' by passing it the form id as a parameter.</li>
<li>Define a form with a specific id. </li>
</ol>
<br />David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com1tag:blogger.com,1999:blog-7954468691908846961.post-74863989226572573542013-09-17T00:24:00.002-07:002013-09-17T00:30:50.092-07:00How to install Alfresco WorkdeskThe installation of Alfresco Workdesk is already explained in the Alfresco Workdesk documentation. So this article aims to be a short summary of it.<br />
<br />
Let's assume that we already have a running Alfresco instance. Even the Alfresco Community Edition will do it. The default installation of Alfresco already comes with Apache Tomcat. So we can just use this container for evaluation purposes.<br />
<br />
The Alfresco Workdesk bundle comes as an archive which contains the following folders:<br />
<ul>
<li><b>bin</b>: The Desinger and the Workdesk application</li>
<li><b>db</b>: The database creation scripts</li>
<li><b>doc</b>: Some basic documentation. Further documentation is available, but you have to request it at Alfresco.</li>
<li><b>javadoc</b>: The source code documentation</li>
<li><b>lib</b>: Additional dependencies</li>
</ul>
The 'bin' folder contains a script 'create_workdesk_war' which creates you a WAR-file from the 'bin/workdesk' folder. Actually it just zips the content of this folder up. However, let's create it. Then perform the follwing steps:<br />
<ul>
<li>Copy the workdesk.war file to $TOMCAT_HOME/webapps</li>
<li>Restart your Tomcat Server</li>
<li>Open http://${host}:${port}/workdesk </li>
</ul>
As you can see Workdesk was already successfully deployed and can already be used BUT it is currently configured to use an Alfresco repository (via CMIS) which is hosted in the Cloud. So in the next steps we focus on changing the Workdesk configuration in order to access our local repository.<br />
<ul>
<li>There are some prepared configuration profiles stored in '$TOMCAT_HOME/webapps/workdesk/WEB-INF/conf . Our current installation uses the 'opencmis_trial' profile. To connect to the local repository we need to use the 'opencmis' profile.</li>
<li>The profile's root foler 'opencmis' contains a file named 'owbootstrap.xml'. It contains a section 'EcmAdapter. In order to use our local Repository, you have to adapt the URL in the subsection 'AtomPub'. It looks like the following configuration: </li>
</ul>
<blockquote class="tr_bq">
<i> <EcmAdapter></i><br />
<i> ...</i><br />
<i> <AtomPub>http://${host}:${port}/alfresco/cmisatom</AtomPub></i><br />
<i> ...</i><br />
<i></EcmAdapter></i></blockquote>
<br />
<ul>
<li> Now you have to tell Workdesk to use this configuration profile instead the default one. Therefore it is necessary to edit the file '$TOMCAT_HOME/webapps/workdesk/WEB-INF/web.xml'. The file contains a context parameter definition which is named 'OwResourceFilePath':</li>
</ul>
<blockquote class="tr_bq">
<i><context-param id="OwResourceFilePath"></i><br />
<i> <param-name>OwResourceFilePath</param-name></i><br />
<i> <param-value>deploy#WEB-INF/conf/opencmis</param-value></i><br />
<i></context-param> </i></blockquote>
<ul>
<li> Alfresco Workdesk seems to require own database tables. I just created the tables inside my Alfresco database. Here are the PostgreSQL statements:</li>
</ul>
<blockquote class="tr_bq">
<i>-- CREATE TABLE "OW_ATTRIBUTE_BAG";</i><br />
<i>CREATE TABLE OW_ATTRIBUTE_BAG</i><br />
<i>(</i><br />
<i> "username" character varying(128) NOT NULL,</i><br />
<i> "bagname" character varying(128) NOT NULL,</i><br />
<i> "attributename" character varying(256) NOT NULL,</i><br />
<i> "attributevalue" character varying(1024) NOT NULL,</i><br />
<i> CONSTRAINT "OW_ATTRIBUTE_BAG_pkey" PRIMARY KEY ("username" , "bagname" , "attributename" )</i><br />
<i>)</i><br />
<i>WITH (</i><br />
<i> OIDS=FALSE</i><br />
<i>);</i></blockquote>
<blockquote class="tr_bq">
<i>-- CREATE TABLE "OW_HISTORY";</i><br />
<i>CREATE TABLE OW_HISTORY</i><br />
<i>(</i><br />
<i> "eventindex" SERIAL UNIQUE NOT NULL,</i><br />
<i> "ow_hist_type" integer NOT NULL,</i><br />
<i> "ow_hist_id" character varying(128) NOT NULL,</i><br />
<i> "ow_hist_status" integer DEFAULT NULL,</i><br />
<i> "ow_hist_time" timestamp DEFAULT NULL,</i><br />
<i> "ow_hist_user" character varying(255) NOT NULL,</i><br />
<i> "ow_hist_summary" character varying(2048) DEFAULT NULL,</i><br />
<i> "objectdmsid" character varying(255) DEFAULT NULL,</i><br />
<i> "objectname" character varying(1024) DEFAULT NULL,</i><br />
<i> "parentdmsid" character varying(255) DEFAULT NULL,</i><br />
<i> "parentname" character varying(1024) DEFAULT NULL,</i><br />
<i> "custom1" character varying(2048) DEFAULT NULL,</i><br />
<i> "custom2" character varying(2048) DEFAULT NULL,</i><br />
<i> "custom3" character varying(2048) DEFAULT NULL,</i><br />
<i> CONSTRAINT "EventIndex_pkey" PRIMARY KEY ("eventindex" )</i><br />
<i>)</i><br />
<i>WITH (</i><br />
<i> OIDS=FALSE</i><br />
<i>);</i></blockquote>
<blockquote class="tr_bq">
<i>-- CREATE TABLE "OW_ROLE";</i><br />
<i>CREATE TABLE OW_ROLE</i><br />
<i>(</i><br />
<i> "role_id" SERIAL UNIQUE NOT NULL,</i><br />
<i> "role_name" character varying(255) NOT NULL,</i><br />
<i> "role_resource" character varying(255) NOT NULL,</i><br />
<i> "role_access" integer NOT NULL DEFAULT (-1),</i><br />
<i> "role_access_mask" integer NOT NULL DEFAULT (-1),</i><br />
<i> "category" integer NOT NULL,</i><br />
<i> CONSTRAINT role_id_pkey PRIMARY KEY ("role_id")</i><br />
<i>)</i><br />
<i>WITH (</i><br />
<i> OIDS=FALSE</i><br />
<i>); </i></blockquote>
<ul>
<li>Last but not least, it is required to tell Workdesk which database should be used. Therefore the file '$TOMCAT_HOME/webapps/workdesk/META-INF/context.xml needs to be edited. In my case it has the following content:</li>
</ul>
<blockquote class="tr_bq">
<i> <?xml version="1.0" encoding="UTF-8"?></i><br />
<i><br /></i>
<i><Context path="/workdesk" debug="100" privileged="true" reloadable="true"></i><br />
<i> </i><br />
<i> <Resource name="java:/PostgreSQLDS" </i><br />
<i> auth="Container"</i><br />
<i> type="javax.sql.DataSource"</i><br />
<i> factory="org.apache.tomcat.dbcp.dbcp.BasicDataSourceFactory" </i><br />
<i> driverClassName="org.postgresql.Driver"</i><br />
<i> url="jdbc:postgresql://localhost:5432/alfresco"</i><br />
<i> username="${alf.db.user}" </i><br />
<i> password="${alf.db.pwd}" </i><br />
<i> removeAbandoned="true"</i><br />
<i> maxActive="30" </i><br />
<i> maxIdle="10"</i><br />
<i> maxWait="1000"</i><br />
<i> removeAbandonedTimeout="60"</i><br />
<i> logAbandoned="true"/> </i><br />
<i> </i><br />
<i></Context></i></blockquote>
<br />
<ul>
<li>Just restart your Tomcat installation to get the changes applied. Then log-in by using one of your Alfresco users. </li>
</ul>
<br />
The more interesting part will follow. Another article will focus on how to customize Alfresco Workdesk in order manage specific cases. <br />
<ul></ul>
David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com0tag:blogger.com,1999:blog-7954468691908846961.post-74031527097184702582013-06-14T01:35:00.000-07:002013-06-14T01:48:49.966-07:00Dynamic web pages with PythonI just got a Raspberry Pi. This small box has just 700Mhz CPU speed and 512 MB main memory, so you can not expect to be able to run a full featured Enterprise Java Application on it. The Raspian Linux for the Pi is very Python focused and I think there are good reasons for that. Python is object oriented, easy to learn and very flexible and there are a lot of libraries and frameworks around it. This includes for instance Template Engines or Database Access. As a 'light' scripting language it seems also to be less resource consuming. So at least I like Python. So my first Raspberry project was to install an Apache Web Server and the Python Module in order to try out to develop dynamic web sites based on the Raspberry platform. First to say: the setup is very easy. Python comes with it's own distribution system (so with a kind of package manager) which allows you to install everything you need in a few minutes. For things like the Apache Web Server the Debian based package management (apt) should be usded:<br />
<br />
<pre class="prettyprint">sudo apt-get install apache2
sudo apt-get install libapache2-mod-python
sudo apt-get install python-pip (This installs the Python Package Index)
pip install Jinja2 (This installs the Template Engine Jinja2)
</pre>
<br />
All you need to do to enable your Apache for Python is to edit the configuration file /etc/apache2/sites-available/default by adding the following handler definition to the <Directory /var/www> - section:<br />
<br />
<pre class="prettyprint"> AddHandler mod_python .py
PythonHandler mod_python.publisher
PythonDebug On
</pre>
<br />
Now create a folder which is named 'templates' under /var/www . All your templates have to live inside this folder because we are using a File System Template Loader. Inside the template folder the hello.html fille was created for demonstration purposes:<br />
<br />
<pre class="prettyprint"> <html> Hello {{name}} ! </html>
</pre>
<br />
As you can see there is one placeholder 'name'. Now we want to create Python code which uses the template. The following code example explains it:<br />
<br />
<pre class="prettyprint">###
# Apache could be used together with python. To have a clean
# seperation between the script code behind and the html view
# a template engine can be used. The following controller script
# shows how to render a web page based on a model and an HTML
# template
###
#Import the Jinja2 template engine
from jinja2 import Environment, FileSystemLoader
# Function to handle the reqest
def index(req):
# Set the environment by using a file system loader
env = Environment(loader = FileSystemLoader('/var/www/templates'))
# Get the template hello.html
template = env.get_template('hello.html')
# Return the rendered result
return template.render(name='Your Name')
</pre>
<br />
Your rendered output is now accessible via http://yourhost/hello.py and should look as the following one:<br />
<br />
<pre class="prettyprint">Hello Your Name !
</pre>
<br />
<br />
<br />
<br />
<br />David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com0tag:blogger.com,1999:blog-7954468691908846961.post-34992657206366996512013-03-06T07:59:00.002-08:002013-03-06T08:16:16.780-08:00Alfresco's Auditing System<b><u>Preamble</u></b> <br />
<br />
I just had to think about the monitoring of Alfresco. Things like 'Which user logged in how often' or 'Which document was opened how often' were required. My first idea was to develop the following system:<br />
<ul>
<li>Alfresco Share does communicate with the Repository layer via Web Scripts. So every action should cause an HTTP request. </li>
<li>A proxy in front of the Alfresco repository which filters requests those are relevant (E.G. the AuthenticationService)</li>
<li>Each matching request should be logged to a database. So the database contains just the HTTP request text and the request parameters.</li>
<li>Then it is possible to use the request log to create specific reports</li>
</ul>
By further investigating the requirements the question was raised if Alfresco not yet has such a functionality. This is the reason why this article spots some light on the Alfresco Auditing feature. From the first view, this feature includes the previous mentioned idea. I can define Extractors and Generators based on a by path filtering (whereby the path seems to refer to the RESTful service which is used). Further investigations may answer the question if the auditing is suitable to fit the above mentioned requirements.<br />
<ul>
<li>Auditing needs to be enabled.</li>
<li>Configure filters.</li>
<li>There are DataProducers, DataExtractors and DataGenerators</li>
<li>It is possible to define custom AuditApplications</li>
<li>The Auditservice is used to retrieve the audit data.</li>
<li>The RecordValue element depends on a DataExtractor by specifying which data trigger and which data source to use</li>
</ul>
So now let's try to get behind it <br />
<br />
<b><u>Configuration</u></b><br />
<ul>
<li>To enable auditing you can set 'audit..enabled=true' in the alfresco-global.properties file. The web script under '/api/audit/control' then gives you further details about the state. To enable specific audit applications (see section below) you can set 'audit.${application id}.enabled = true'.</li>
<li>Set logging in audit-log.properties: org.alfresco.repo.audit.AuditComponentImpl=DEBUG</li>
</ul>
<u><b>Filters</b></u><br />
<br />
Filters are applied to events. The DataProducer is identified by a root path. A DataProducer calls a recordAuditValues method which uses the root path and a audit map. The map contains the information which is relevant for auditing purposes. So if the root path is "/alfresco-access/transactio" then the map contains the values 'action' (E.G. MOVE), 'node' (The target node of the action), 'move/from/node', 'move/to/node', 'sub-actions' and so on.<br />
<br />
It is now possible to define filters in the alfresco configuration file. The format is:<br />
<ul>
<li>audit.filter.${application part of the root path}.${sub path of the root path}.${property in audit map} = ${; seperated list of regular expressions for values those should match}</li>
</ul>
So an example is to audit every log-ins of the user jblogs and every user who has an user id which begins with 'd'.<br />
<ul>
<li> audit.filter.alfresco-access.login.user=jblogs; d.*</li>
</ul>
Additionally it's required to enable the audting for a specifc filter<br />
<ul>
<li>audit.filter.alfresco-access.login.enabled=true</li>
</ul>
<u><b>DataProducers</b></u><br />
<br />
There are several data producers out of the box available. The documentation says that the 'org.alfresco.repo.audit.access.AccessAuditor' does not resolve any event in detail (preview and download is one single event) whereby the 'AuditMethodInterceptor' producer records seperated events. There is property in the configuration 'audit.alfresco-access.sub-actions.enabled' which seems to be used to tell Alfresco which DataProducer should be used.<br />
<br />
<u><b>DataGenerators </b></u><br />
<br />
A data generator produces output without any input. So data is produced when a specifc path is set as active. The AuthenticatedUserDataGenerator generates data as soon as a person gets authenticated. So the data generator is responsible for generating data dependent on specific events. Such a generator is not the same a DataProducer. It seems that a producer is used to implement the 'Which events should produce data?' and the DataGenerator is used to implement the 'Which data should generated?'.<br />
<br />
A data generator has a registered name or fully qualified class name. In
the first case you can access it via the Spring bean id
(audit-services-context.xml) in the last case you can reference it via
its class name directly. (class or registeredName properties if defining
them in the application configuration)<br />
<br />
The documentation says that the 'AccessAuditor' generator writes entries like:<br />
<br />
${application part of the root path}.${sub path of the root path}.${property in audit map}= ${value in audit map}.<br />
<br />
<u><b>DataExtractors </b></u><br />
<br />
It is a component which uses input data to produce some output. As a DataGenerator you can define it in your application configuration
by using its registered name or fully qualified class name. Alfresco provides the SimpleValueExtractor (org.alfresco.repo.audit.extractor.SimpleValueDataExtractor). This default extractor just returns the input without any transofrmation. Another examle is the NodeNameDataExtractor which is able to extract the cm:name value of a node. So in summary the extractor is used to implement the 'How to store the previously generated data?'<br />
<br />
<b><u>Path mappings</u></b><br />
<br />
We already mentioned the root path and we also know that our audit entry map contains paths as part of the keys. The path mapping can be used to rewrite these paths. So let's assume you want '/ecgaudit/login' as the path in you entry map instead '/alfresco-api/post/AuthenticationService/authenticate' then you can define the following path mapping:<br />
<br />
<PathMappings><br />
<PathMap source="/alfresco-api/post/AuthenticationService/authenticate" target="/ecgaudit/login"<br />
</PathMappings><br />
<br />
To following the path conventions, please keep in mind that the first part of the path is the application id.<br />
<br />
<b><u>Audit Applications</u></b> <br />
<br />
How exactly auditing behaves depends on the audit application. There is one application provided by Alfresco which is named 'alfresco-access'.<br />
<br />
You can add new audit application configurations to <tomcat>/shared/classes/alfresco/extension/audit directory. Just create an XML file ${application id}.xml inside it.<br />
<br />
Here an example application from the Alfresco Wiki:<br />
<br />
<Application name="DOD5015" key="DOD5015"><br />
<AuditPath key="login"><br />
<AuditPath key="args"><br />
<AuditPath key="userName"><br />
<RecordValue key="value" dataExtractor="simpleValue"/><br />
</AuditPath><br />
</AuditPath><br />
<AuditPath key="no-error"><br />
<GenerateValue key="fullName" dataGenerator="personFullName"/><br />
</AuditPath><br />
<AuditPath key="error"><br />
<RecordValue key="value" dataExtractor="nullValue"/><br />
</AuditPath><br />
</AuditPath><br />
</Application><br />
<br />
<u><b>Audit trail </b></u><br />
<br />
As mentioned before there is the 'alfresco-access' application. So the default entries in the trail are coming from this application. Database tables are used to store the audit trail. The following columns are visible in the trail: 'user name', 'application', 'method' (which is similar to 'action'), timestamp, entry (as explained before such an entry contains a map of values. How the entry looks like depends on the data generation and extraction). <br />
<u><b><br /></b></u>
<u><b>AuditService</b></u><br />
<br />
The audit service implements the following interface: <a href="http://dev.alfresco.com/resource/docs/java/repository/org/alfresco/service/cmr/audit/AuditService.html">http://dev.alfresco.com/resource/docs/java/repository/org/alfresco/service/cmr/audit/AuditService.html</a> . Eye catching is that you have to specify an audit query. A query is handled in an AuditQueryCallback <a href="http://www.blogger.com/(http://dev.alfresco.com/resource/docs/java/repository/org/alfresco/service/cmr/audit/AuditService.AuditQueryCallback.html">(http://dev.alfresco.com/resource/docs/java/repository/org/alfresco/service/cmr/audit/AuditService.AuditQueryCallback.html</a>). The callback has to implement the 'handleAuditEntry' method which gets passed the following parameters:<br />
<br />
<ul>
<li>entryId</li>
<li>applicationName</li>
<li>user</li>
<li>time</li>
<li>the entry map</li>
</ul>
Additionally it seens to be possible to just access the above defined applications RESTfully. If I understood it right, then the audit query is just the following HTTP call.<br />
<ul>
<li>http://localhost:8080/alfresco/service/api/audit/query/${Application id}?${Parameters}</li>
</ul>
The documentation mentions the following parameters:<br />
<br />
<ul>
<li>verbose = true | false</li>
<li>limit = ${The number of last n values to return}</li>
<li>forward = true | false</li>
<li>toId = ${Which id-s should be included. This is not the node id, but the entry id}</li>
</ul>
<u><b>Summary </b></u><br />
<br />
In summary I think that the auditing feature is capable to fit my initial requirements. It is highly customizable. So it should be possible to extend it with own Producers, Generators and Extractors based on the specific requirements. It provides indeed a suiteable framework but by adding some complexity. What should be kept in mind is that this level of complexity may affect the performance of the system in a negative way, but this needs further evaluation. I will start by using the default audit application to get my hands on it. <br />
<ul>
</ul>
David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com0tag:blogger.com,1999:blog-7954468691908846961.post-52277217491688502712013-02-21T04:14:00.000-08:002013-02-21T05:18:30.886-08:00Custom form controls in Alfresco<u><span style="font-size: small;"><b>Bas<span style="font-size: small;">ics</span></b></span></u><br />
<br />
<span style="font-size: small;"><span style="font-size: small;">It's possible<span style="font-size: small;"><span style="font-size: small;"> to</span> use custom form controls <span style="font-size: small;">to show</span> your<span style="font-size: small;"> prop<span style="font-size: small;">erties.<span style="font-size: small;"> <span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">T</span>he following snippet explains how to us<span style="font-size: small;">e <span style="font-size: small;">t<span style="font-size: small;">he<span style="font-size: small;">m</span></span></span>:</span></span></span></span></span></span></span></span></span><br />
<br />
<pre class="prettyprint lang-xml"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><config evaluator="node-type" condition="<span style="font-size: small;">e<span style="font-size: small;">cg</span></span>:<span style="font-size: small;">mytype</span>"></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> <span style="font-size: small;"><</span>forms>
<form>
<field-visibility>
<!-- <span style="font-size: small;">My <span style="font-size: small;">property</span></span> which is only <span style="font-size: small;">visible in the view<span style="font-size: small;"> edit mode b<span style="font-size: small;">ut not <span style="font-size: small;">in the view mode</span></span></span></span>-->
<show id="<span style="font-size: small;">ecg:myprop</span>" for-mode="<span style="font-size: small;">edit</span>"/></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> <<span style="font-size: small;">/</span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">field-visibility></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> <appearance></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> <!-- Define a panel o<span style="font-size: small;">n which <span style="font-size: small;">my property should be shown --<span style="font-size: small;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> <set id="<span style="font-size: small;">my</span>Panel" appearance="bordered-panel" label="<span style="font-size: small;">My <span style="font-size: small;">P</span>roperties</span>"/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> <!-- Add the property to the panel by defining which<span style="font-size: small;"> control should be used --></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> <field id="<span style="font-size: small;">ecg</span>:<span style="font-size: small;">myProp</span>" set="<span style="font-size: small;">my</span>Panel" label="<span style="font-size: small;">My Property</span>"<span style="font-size: small;">></span>
<control template="/<span style="font-size: small;">de</span>/<span style="font-size: small;">e<span style="font-size: small;">cmgeek</span></span>/alfresco/<span style="font-size: small;">mycontrol</span>.ftl">
<control-param name="<span style="font-size: small;">myFirstP<span style="font-size: small;">aram</span></span>"><span style="font-size: small;">myFirstP<span style="font-size: small;">aram</span>Value</span></control-param>
<control-param name="<span style="font-size: small;">m<span style="font-size: small;">ySe<span style="font-size: small;">cond<span style="font-size: small;">Param</span></span></span></span>"><span style="font-size: small;">mySeceondP<span style="font-size: small;">aram</span>Value</span></control-param>
</control>
</field> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> </appearance> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> </<span style="font-size: small;">for<span style="font-size: small;">m></span></span> </span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"></form<span style="font-size: small;">s></span> </span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"></co<span style="font-size: small;">nfig></span> </span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"></span></span></span></span></span></span></span></span></pre>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"></span></span></span></span></span></span></span></span></span></span> <br />
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><br /></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"></span></span></span></span></span></span></span></span></span></span> <br />
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><u><b>St<span style="font-size: small;">r<span style="font-size: small;">ucture of a form control</span></span></b></u></span></span></span></span></span><br />
<br />
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> <span style="font-size: small;">So </span></span></span></span>a</span> form control is <span style="font-size: small;">just a freemarke<span style="font-size: small;">r t<span style="font-size: small;">emplate wich can be referenced <span style="font-size: small;">in <span style="font-size: small;">your form conf<span style="font-size: small;">ig<span style="font-size: small;">uration. Therefore you need to store it under for instance 'w<span style="font-size: small;">eb-extension/site-webscripts/<span style="font-size: small;">de</span></span></span></span></span></span>/ecmge<span style="font-size: small;">ek/alfresco<span style="font-size: small;">'. Bu<span style="font-size: small;">t how d<span style="font-size: small;">oes <span style="font-size: small;">such a form look like<span style="font-size: small;"><span style="font-size: small;">? H<span style="font-size: small;">ere the<span style="font-size: small;"> code of the textfield.ftl which is <span style="font-size: small;">provided by Alfresco.</span></span></span></span></span></span></span></span></span></span></span></span></span></span><br />
<br />
<br />
<pre class="prettyprint lang-xml"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><div class="form-field">
<#if form.mode == "view">
<div class="viewmode-field">
<#if field.mandatory && !(field.value?is_number) && field.value == "">
<span class="incomplete-warning"><img src="${url.context}/res/components/form/images/warning-16.png" title="${msg("form.field.incomplete")}" /><span>
</#if>
<span class="viewmode-label">${field.label?html}:</span>
<#if field.control.params.activateLinks?? && field.control.params.activateLinks == "true">
<#assign fieldValue=field.value?html?replace("((http|ftp|https):\\/\\/[\\w\\-_]+(\\.[\\w\\-_]+)+([\\w\\-\\.,@?\\^=%&:\\/~\\+#]*[\\w\\-\\@?\\^=%&\\/~\\+#])?)", "<a href=\"$1\" target=\"_blank\">$1</a>", "r")>
<#else>
<#if field.value?is_number>
<#assign fieldValue=field.value?c>
<#else>
<#assign fieldValue=field.value?html>
</#if>
</#if>
<span class="viewmode-value"><#if fieldValue == "">${msg("form.control.novalue")}<#else>${fieldValue}</#if></span>
</div>
<#else>
<label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
<input id="${fieldHtmlId}" name="${field.name}" tabindex="0"
<#if field.control.params.password??>type="password"<#else>type="text"</#if>
<#if field.control.params.styleClass??>class="${field.control.params.styleClass}"</#if>
<#if field.control.params.style??>style="${field.control.params.style}"</#if>
<#if field.value?is_number>value="${field.value?c}"<#else>value="${field.value?html}"</#if>
<#if field.description??>title="${field.description}"</#if>
<#if field.control.params.maxLength??>maxlength="${field.control.params.maxLength}"</#if>
<#if field.control.params.size??>size="${field.control.params.size}"</#if>
<#if field.disabled && !(field.control.params.forceEditable?? && field.control.params.forceEditable == "true")>disabled="true"</#if> />
<@formLib.renderFieldHelp field=field />
</#if>
</div></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<br />
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><br />
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><br /></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">As you can <span style="font-size: small;">see the<span style="font-size: small;"> following <span style="font-size: small;">elements are out of the box available:</span></span></span></span></span></span></span></span></span></span></span></span></span></span><br />
<ul>
<li><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">Parameters via E.G.<span style="font-size: small;"> '<span style="font-size: small;">fi<span style="font-size: small;">eld.control.params.</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">myFirstP<span style="font-size: small;">aram<span style="font-size: small;">'</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></li>
<li><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">The </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>value of the field via 'field.val<span style="font-size: small;">ue'. It makes sense to <span style="font-size: small;">make it avail<span style="font-size: small;">able as via <span style="font-size: small;">${fieldValue}<span style="font-size: small;"> in order to use it in your HTML or JavaScript<span style="font-size: small;">. <span style="font-size: small;">Therefore Freemarker's assign command can be used '</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><#assign fieldValue=field.value> <span style="font-size: small;">.<span style="font-size: small;"> (<span style="font-size: small;">The term 'field.value' is <span style="font-size: small;">only available within <span style="font-size: small;">Freema<span style="font-size: small;">rker<span style="font-size: small;"> <span style="font-size: small;">directives.</span></span></span></span></span></span></span></span> <span style="font-size: small;">But it is possible to assign them to a pl<span style="font-size: small;">ace holder (interpolation) by using <span style="font-size: small;">the assign dire<span style="font-size: small;">ctive.)</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></li>
<li><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">The <span style="font-size: small;">form mode via 'for<span style="font-size: small;">m.mode'</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></li>
<li><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">The <span style="font-size: small;">enabled/disabled mode <span style="font-size: small;">of the <span style="font-size: small;">field by using '</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">field.disabled'.</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></li>
<li><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">T<span style="font-size: small;">h<span style="font-size: small;">e information if the field is a <span style="font-size: small;">mad<span style="font-size: small;">atory one or not <span style="font-size: small;">by using '</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">field.mandatory</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>' </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></li>
<li><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">The f<span style="font-size: small;">ield descrip<span style="font-size: small;">tion v<span style="font-size: small;">ia 'field.description'</span></span></span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></li>
<li><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">The field<span style="font-size: small;"> n<span style="font-size: small;">ame</span> directly via $<span style="font-size: small;">{fieldName}</span></span></span>. </span></span></span></span></span></span></span></span></span></span></span></li>
<li><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">The field id via ${fie<span style="font-size: small;">ld<span style="font-size: small;">Htm<span style="font-size: small;">lId}. </span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">The field id is <span style="font-size: small;">important. It will be replaced by <span style="font-size: small;">a<span style="font-size: small;">n</span> unique id which depends on the form id and t<span style="font-size: small;">he prefix and name of your property. <span style="font-size: small;">So you can <span style="font-size: small;">later reference your field by using this uni<span style="font-size: small;">que id.</span></span></span></span></span></span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> </span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> </span></span></span></span></span></span></span></span></span></span></span></li>
</ul>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> <span style="font-size: small;">So from what we know <span style="font-size: small;">it is easy to create sta<span style="font-size: small;">tic controls those ar<span style="font-size: small;">e l<span style="font-size: small;">o<span style="font-size: small;">oking as we want by chaning the HTML code<span style="font-size: small;">. But what <span style="font-size: small;">if we wa<span style="font-size: small;">nt t<span style="font-size: small;">o have a more dynamic <span style="font-size: small;">c<span style="font-size: small;">ontrol<span style="font-size: small;">, f<span style="font-size: small;">or instace <span style="font-size: small;">a<span style="font-size: small;">n <span style="font-size: small;">autocompletion<span style="font-size: small;"> one</span> <span style="font-size: small;">or a <span style="font-size: small;">custom category picker<span style="font-size: small;">?</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><br />
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><br /></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">Within yo<span style="font-size: small;">ur control the Share API is available (<a href="http://sharextras.org/jsdoc/share/community-4.0.c/symbols/Alfresco.Share.html">http://sharextras.org/jsdoc/share/community-4.0.c/symbols/Alfresco.Share.html</a>). Add<span style="font-size: small;">itionally you <span style="font-size: small;">have access to the YUI stuff. (YUI is the <span style="font-size: small;">UI framework behind Alfresco Share) (<a href="http://developer.yahoo.com/yui/2/">http://developer.yahoo.com/yui/2/</a>).<span style="font-size: small;"> <span style="font-size: small;">So <span style="font-size: small;">you c<span style="font-size: small;">an mix the <span style="font-size: small;">me<span style="font-size: small;">ntioned HTML with Java <span style="font-size: small;">Script<span style="font-size: small;"> <span style="font-size: small;">to perform A<span style="font-size: small;">JAX requests in ord<span style="font-size: small;">er to get data from the repository layer<span style="font-size: small;"> (provided by Web-Scripts). This <span style="font-size: small;">client side <span style="font-size: small;">Java Script <span style="font-size: small;">can then directly man<span style="font-size: small;">ipulate <span style="font-size: small;">your <span style="font-size: small;">c<span style="font-size: small;">ontrols DOM tree.<span style="font-size: small;"> Important is that you <span style="font-size: small;">run the script after <span style="font-size: small;">your <span style="font-size: small;">con<span style="font-size: small;">trol <span style="font-size: small;">was completely available <span style="font-size: small;">(ren<span style="font-size: small;">dered)<span style="font-size: small;"><span style="font-size: small;">. Here an exam<span style="font-size: small;">ple<span style="font-size: small;">:</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><br />
<br />
<br />
<pre class="prettyprint lang-xml"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><script type="text/javascript">//<![CDATA[
(function()
{
YAHOO.util.Event.onContentReady("${fieldHtmlId}",
function ()
{
var successHandler = function (response)
{
<span style="font-size: small;">//<span style="font-size: small;">Ha<span style="font-size: small;">ndle <span style="font-size: small;">the A<span style="font-size: small;">JAX request</span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> var <span style="font-size: small;">data</span> = response.json;</span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> //Use the data<span style="font-size: small;"> ...</span> </span></span></span></span></span>
};
var failureHandler = function (response) {
Alfresco.logger.error("<span style="font-size: small;">Could not perform the AJAX request</span>: " + response.serverResponse.responseText);
};
</span>
<span style="font-size: small;"> v<span style="font-size: small;">ar my<span style="font-size: small;">paramValue = "${</span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">fi<span style="font-size: small;">eld.control.params.</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">myFirstP<span style="font-size: small;">aram</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>}";</span></span>
var url = Alfresco.constants.PROXY_URI + "ecg/<span style="font-size: small;">mywebscript</span>.json?<span style="font-size: small;">mypara<span style="font-size: small;">m</span></span>=" + </span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">my<span style="font-size: small;">paramValue </span></span></span>;
var config =
{
method: "GET",
url: url,
successCallback:
{
fn: successHandler,
scope: this
},
failureCallback:
{
fn: failureHandler,
scope: this
}
};
Alfresco.util.Ajax.request(config);
}
,this);
})();
//]]></script></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><div class="form-field"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">...</span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"></div></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<br />
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> <br />
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> <b><u><span style="font-size: small;">How the <span style="font-size: small;">fo<span style="font-size: small;">rm submission w<span style="font-size: small;">orks</span></span></span></span></u></b></span></span></span></span></span></span></span></span></span></span></span></span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><br />
<br />
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">So <span style="font-size: small;">as you can see <span style="font-size: small;">it is<span style="font-size: small;"> possible t<span style="font-size: small;">o get data from the <span style="font-size: small;">r</span>epository layer by <span style="font-size: small;">accessing REST<span style="font-size: small;">Ful</span> web services. <span style="font-size: small;">Such <span style="font-size: small;">a RESTFul web service. Such a <span style="font-size: small;">service <span style="font-size: small;">can be implemented <span style="font-size: small;">as Web Script. You t<span style="font-size: small;">hen can use the data which was provided by the ser<span style="font-size: small;">vice in order to <span style="font-size: small;">manipulate t<span style="font-size: small;">he DOM <span style="font-size: small;">of your <span style="font-size: small;">control<span style="font-size: small;">. An <span style="font-size: small;">auto complet<span style="font-size: small;">ion control could <span style="font-size: small;">ask t<span style="font-size: small;">he service <span style="font-size: small;">for <span style="font-size: small;">matching words <span style="font-size: small;">based on the input <span style="font-size: small;">of the user by <span style="font-size: small;">writing out a <span style="font-size: small;">list into a DIV <span style="font-size: small;">conta<span style="font-size: small;">iner wi<span style="font-size: small;">th<span style="font-size: small;"> the id '</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">${fie<span style="font-size: small;">ld<span style="font-size: small;">Htm<span style="font-size: small;">lId}-acc'.<span style="font-size: small;"> <span style="font-size: small;">A user may s<span style="font-size: small;">elect mult<span style="font-size: small;">iple<span style="font-size: small;"> (by t<span style="font-size: small;">he autocompletion recommended) values.<span style="font-size: small;"> But how would <span style="font-size: small;">you submit the selected values. <span style="font-size: small;">The <span style="font-size: small;">answer <span style="font-size: small;">is<span style="font-size: small;">: V<span style="font-size: small;">ia t<span style="font-size: small;">he v<span style="font-size: small;">alue attribute of the input field with the id '</span></span></span></span></span></span></span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">${fie<span style="font-size: small;">ld<span style="font-size: small;">Htm<span style="font-size: small;">lId}'. <span style="font-size: small;">Dependent on the type of your field<span style="font-size: small;">, the form processor will handle the values inside <span style="font-size: small;">this field <span style="font-size: small;">in a different way</span>. So if you have a classification <span style="font-size: small;">(or user) </span>property t<span style="font-size: small;">hen the value i<span style="font-size: small;">nside the field should be a <span style="font-size: small;">node refere<span style="font-size: small;">nce. If <span style="font-size: small;">you have a text inp<span style="font-size: small;">ut then the value should <span style="font-size: small;">be j<span style="font-size: small;">ust the <span style="font-size: small;">text to show.<span style="font-size: small;"> If you <span style="font-size: small;">want to submit mult<span style="font-size: small;">i<span style="font-size: small;">ple node references then the value shoud be a <span style="font-size: small;">comma seperated list of <span style="font-size: small;">node refere<span style="font-size: small;">nces. <span style="font-size: small;">Because it is of<span style="font-size: small;">ten not really useful to sho<span style="font-size: small;">w the user a field w<span style="font-size: small;">hi<span style="font-size: small;">c<span style="font-size: small;">h shows a comma seperated l<span style="font-size: small;">ist of values<span style="font-size: small;">,<span style="font-size: small;"> the trick is to have one <span style="font-size: small;">inp<span style="font-size: small;">u<span style="font-size: small;">t field (or <span style="font-size: small;">Picker, ...<span style="font-size: small;">) w<span style="font-size: small;">h<span style="font-size: small;">ich is visible b<span style="font-size: small;">ut has a different id<span style="font-size: small;">, E.G. </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">'${fie<span style="font-size: small;">ld<span style="font-size: small;">Htm<span style="font-size: small;">lId}-<span style="font-size: small;">show</span>'</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> w<span style="font-size: small;">hereby st<span style="font-size: small;">o<span style="font-size: small;">ring your seperated list o<span style="font-size: small;">f node references inside a <span style="font-size: small;">hidden field with the id<span style="font-size: small;"> '</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">${fieldHtml</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">${fie<span style="font-size: small;">ld<span style="font-size: small;">Htm<span style="font-size: small;">lId}'.<span style="font-size: small;"> So you <span style="font-size: small;">sh<span style="font-size: small;">ow one field <span style="font-size: small;">for <span style="font-size: small;">working purposes b<span style="font-size: small;">ut you <span style="font-size: small;">use the <span style="font-size: small;">value of the on one with the <span style="font-size: small;">id '</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">${fieldHtml</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">${fie<span style="font-size: small;">ld<span style="font-size: small;">Htm<span style="font-size: small;">lId}' duri<span style="font-size: small;">ng the submission</span>. <span style="font-size: small;">I <span style="font-size: small;">used the following J<span style="font-size: small;">ava Script to add <span style="font-size: small;">new <span style="font-size: small;">node references t<span style="font-size: small;">o the value attribute <span style="font-size: small;">of t<span style="font-size: small;">he hidden i<span style="font-size: small;">nput field <span style="font-size: small;">with<span style="font-size: small;"> the id </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">'${fieldHtmlId}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">'${fieldHtmlId}</span> <span style="font-size: small;">'${fieldHtmlId}':}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">${fieldHtml</span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">${fieldHtmlId}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">${fieldHtml${fieldHtmlId}</span></span></span></span></span></span></span></span></span></span></span>':</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><br />
<br />
<br />
<pre class="prettyprint lang-xml"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"> //Add to the hidden field
<span style="font-size: small;"> </span>var hiddenField = document.getElementById("${fieldHtmlId}");
var value = hiddenField.getAttributeNode("value");
<span style="font-size: small;"></span>var bk<span style="font-size: small;">p</span>Value = value.nodeValue;
var ne<span style="font-size: small;">w</span>Value = "";
if (bk<span style="font-size: small;">p</span>Value == "")
{
<span style="font-size: small;"></span>newValue = <span style="font-size: small;">my<span style="font-size: small;">N<span style="font-size: small;">odeRef</span></span></span>;
}
else
<span style="font-size: small;"></span>{
ne<span style="font-size: small;">w</span>Value = bkpValue + "," + <span style="font-size: small;">myNodeRef</span>;
}
value.nodeValue = newValue;</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
</pre>
<br />
<br />
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><b><u>Room for improvements</u></b></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><br />
<br />
<span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;">Y<span style="font-size: small;"><span style="font-size: small;">ou may <span style="font-size: small;"><span style="font-size: small;">use one control for mu<span style="font-size: small;">ltiple times on one single form. This causes that you can see tha above mentioned Java Script code for multiple times in the client side Java Script code (by using Firebug ...). </span></span></span></span></span></span>To avoid this you can <span style="font-size: small;">put t<span style="font-size: small;">he JavaScript into a cus<span style="font-size: small;">tom Java Script <span style="font-size: small;">library. <span style="font-size: small;">Which then could be for instance accesse<span style="font-size: small;">d this way: 'MyLib.addToValues(fieldId, nodeRef)'.)nfiibavi</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com0tag:blogger.com,1999:blog-7954468691908846961.post-19979572553542402802013-02-04T09:11:00.001-08:002013-02-04T13:56:52.302-08:00Notifications made easyDid you ever miss a general notification service. I just had the situation that the built in notifications of the given system ( ... it was not Alfresco, but this big parent of it) were note suitable enough. So I decided to realize my own notification system by using Freemarker templates (<u>http://freemarker.sourceforge.net</u>).<br />
<br />
The task is to create an HTML email body by using an email template instead to build your text by using String concatenation. So what I did is the following:<br />
<br />
<ul>
<li> I created 3 classes: Model, Template and Processor</li>
<li>The Model class is just a wrapper which allows you to add key-value-pairs to a root-HashMap. I just used it to avoid to add data to a Map<Object,Object>.</li>
<li>The Template has a constructor which allows you to specify the template root location. The default constructor reads the 'folder' attribute from a property file which must be stored within the classpath (template.properties). The get-Method returns an instance of the Freemarker template which has the requested name (E.G. simple.ftl)</li>
<li>The Processor generates the output dependent on the model and the template. </li>
<li>I also added a helper class for reading the configuration from the template.properties file.</li>
<li>2 Exception classes were created to differ between 'Template not found' and 'Template could not be processed'.</li>
<li>The Main class has only testing purposes</li>
</ul>
<br />
My quite simple mail body template has 4 regions. One for the headers, one for the text of the message, one to print out some key value pairs and finally one for a footer.<br />
<br />
<pre class="prettyprint lang-xml"><html>
<div id="header" style="font-family:Arial; color:#5678a9;">
<h2>${title}</h2>
<br/>
<h3>${subtitle}</h3>
</div>
<br/>
<div id="content" style="font-family:Arial;">
${text}
</div>
<br/>
<br/>
<div id="props" style="font-family:Arial;">
<#list props as prop>
<b>${prop.key}</b>: ${prop.value} </br>
</#list>
</div>
<br/>
<br/>
<div id="footer" style="font-family:Arial;">
${footer}
</div>
</html>
</pre>
<br />
<br />
The Main class wires the model and the template together by using the Processor class.<br />
<br />
<pre class="prettyprint lang-java"> Model model = new Model();
model.add("title", "Notification");
model.add("subtitle", "Important info");
model.add("text", "The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.");
List<Map<String,String>> keyvaluePairs = new ArrayList<Map<String,String>>();
Map<String, String> keyvaluePair1 = new HashMap<String, String>();
keyvaluePair1.put("key", "User");
keyvaluePair1.put("value", "David Maier");
Map<String, String> keyvaluePair2 = new HashMap<String, String>();
keyvaluePair2.put("key", "E-Mail");
keyvaluePair2.put("value", "info@magicable.de");
keyvaluePairs.add(keyvaluePair1);
keyvaluePairs.add(keyvaluePair2);
model.addModel("props",keyvaluePairs);
model.add("footer", "More ECM stuff is available here: <a href='http://www.ecmgeek.de'>ecmgeek.de</a>");
String result = Processor.process(model, "simple.ftl");
System.out.println(result);
</pre>
<br />
<br />
The result looks already quite good:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8p-QkkVss95ARBJkoiNztAbvL2TCS143dnL0UY7X9b0dH8Wshzy89Hzn52oTtodfkcof23frm23ytm-q9bc-u6nfpkeE4fwL-FvtwAjbwkT_awCf0vOoKK3ks8j5p3K-U5RltVifo5MVa/s1600/notifications_with_freemarker.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8p-QkkVss95ARBJkoiNztAbvL2TCS143dnL0UY7X9b0dH8Wshzy89Hzn52oTtodfkcof23frm23ytm-q9bc-u6nfpkeE4fwL-FvtwAjbwkT_awCf0vOoKK3ks8j5p3K-U5RltVifo5MVa/s640/notifications_with_freemarker.png" width="640" /></a></div>
I also already added the Java Mail API dependencies and the source code tree is now the following one. Maybe I will publish the code later.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5LKs3G8bfBjPRl083uOgFM1O57bOfbLJS6R-ZW_DiaXefA8I0AggdiG1D-GrrIWG5waoLLyBUScO_wquXTOYnKlfTNNsg4nM9aXjV0tR3CfSmx8pYpdqOlloNNzi-2p-0gXxIDHv3gc6T/s1600/notfication_sources.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5LKs3G8bfBjPRl083uOgFM1O57bOfbLJS6R-ZW_DiaXefA8I0AggdiG1D-GrrIWG5waoLLyBUScO_wquXTOYnKlfTNNsg4nM9aXjV0tR3CfSmx8pYpdqOlloNNzi-2p-0gXxIDHv3gc6T/s640/notfication_sources.png" width="350" /></a></div>
<br />
<br />
<br />David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com1tag:blogger.com,1999:blog-7954468691908846961.post-12935028924688779362013-01-30T06:24:00.002-08:002013-01-30T06:24:52.683-08:00Nearly trivial but usefulAfter I installed Alfresco 4.1.2 via the exe-Installer, I found out that there is now a small tool which is named 'Manager Tool'. The only thing it does is to list you the Alfresco related service by allowing you to start or stop them. Sure, the Windows Service Manager does exactly the same for you and you may even know how to start or stop services via the command line. However, I just installed a test environment and I really appreciate the possibility to control just the Alfresco related service via one single tool. And the most cool thing is that you can extend it by adding own services those are related to your Alfresco installation. In my case I added the services for the SQLServer, the Transformation Server and the Reverse Proxy. The following screen shot explains everything ... <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Yqb6Tttx8lbPShJ0AJxkg0Lwyg1Yvl3NZO-NjbLS3ev7ggn6oMD1ZAPXCB6hXA9hSvdcA7f6i_JaIP__SlSBNh7GTSDDCW7qNvrxHWLb5rUMNBxP0kpNxtmtXeknclWNqxiz8S8zIur7/s1600/alf_services.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="315" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Yqb6Tttx8lbPShJ0AJxkg0Lwyg1Yvl3NZO-NjbLS3ev7ggn6oMD1ZAPXCB6hXA9hSvdcA7f6i_JaIP__SlSBNh7GTSDDCW7qNvrxHWLb5rUMNBxP0kpNxtmtXeknclWNqxiz8S8zIur7/s640/alf_services.png" width="640" /></a></div>
<br />David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com0tag:blogger.com,1999:blog-7954468691908846961.post-90094957377031324832013-01-30T05:56:00.003-08:002013-01-30T06:01:54.823-08:00How to install a reverse Proxy on WindowsIt's usually not a good idea to install a service as a privileged user. So you may know that it is not possible for an unprivileged user to bind ports below the port number 1000. This is the reason why application containers (like Tomcat) are using the port 8080 instead 80. However, sometimes you want to reach your service via port 80 without the need to run the same as a privileged user. This article explains how to put a reverse proxy in front of a Tomcat server which is listening on port 8080.<br />
<br />
At first just install Apache2 by using the following installer: <u>http://mirror.netcologne.de/apache.org//httpd/binaries/win32/httpd-2.0.64-win32-x86-openssl-0.9.8o.msi </u>.<br />
<br />
If you are a Linux user, then you can just install the server via your package manager. On most Linux distributions then it is also required to install the modules as seperate packages. What we need is the module 'mod_proxy'.<br />
<br />
The above mentioned installation package already includes the proxy modules like 'mod_proxy'. So you just have to configure Apache in order to use it. Apaches's configuration file is named 'httpd.conf'. By default you can find it under %APACHE_HOME%\conf .<br />
<br />
Here are the steps:<br />
<br />
<ol>
<li>In the 'Load Module' section enable the Proxy modules</li>
<li>Disable ProxyRequests in order to use the reverse proxy functionalit instead just the foward one</li>
<li>Define who should have the permission to use the proxy</li>
<li>Define the forward and reverse targets</li>
<li>Define who should have the permission to access the root location</li>
</ol>
<pre class="prettyprint lang-xml">
#Load the required modules
...
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_connect_module modules/mod_proxy_connect.so
LoadModule proxy_http_module modules/mod_proxy_http.so
#Base configuration for a reverse proxy
...
ProxyRequests Off
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
ProxyPass / http://localhost:8080/
ProxyPassReverse / http://localhost:8080/
<Location />
Order deny,allow
Allow from all
</Location>
...
</pre>
<br />
<ol>
</ol>
David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com0tag:blogger.com,1999:blog-7954468691908846961.post-53695499557848173842013-01-25T03:22:00.001-08:002013-01-25T06:50:36.907-08:00How to bootstrap categories in AlfrescoIf you want to categorize document it may result in the wish to have custom categories. In order to have a clean deployment of your Alfresco based application you really don't want to create these categories by hand. So what you need is to deploy the categories as part of the bootstrap of you application. This article explains how it works.<br />
<br />
Let's assume that you followed this Blog and you know that it is possible to set up a repository project by using the AMP archetype which is provided via Maven. Then you already have the source folder which is 'config' which contains a subfolder which is named 'context''. Here the steps:<br />
<br />
<ul>
<li>Create a new folder 'bootsrap' inside the 'context' folder </li>
<li>Create a new xml file named bootstrap-context inside the context folder and add the following to it:</li>
</ul>
<br />
<pre class="prettyprint lang-xml">
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
<bean id="${groupId}.${artifactId}.myBootstrap" class="org.alfresco.repo.module.ImporterModuleComponent" parent="module.baseComponent">
<!-- Module Details -->
<property name="moduleId" value="${pom.artifactId}" />
<property name="name" value="myBootstrap" />
<property name="description" value="For bootstrapping purposes" />
<property name="sinceVersion" value="1.0" />
<property name="appliesFromVersion" value="1.0" />
<!-- Data -->
<property name="importer" ref="spacesBootstrap"/>
<property name="bootstrapViews">
<list>
<!-- Bootstrap the categories -->
<props>
<prop key="path">/cm:categoryRoot/cm:generalclassifiable</prop>
<prop key="location">alfresco/module/${artifactId}/bootstrap/my_categories.xml</prop>
</props>
</list>
</property>
</bean>
</beans>
</pre>
<br />
<ul>
<li> Now import the this context by adding the following line to the file 'config/module-context.xml':</li>
</ul>
<pre class="prettyprint lang-xml">
<import resource="classpath:alfresco/module/${artifactId}/context/bootstrap-context.xml"/>
</pre>
<br />
<br />
<ul>
<li>Finally create an XML file named 'my_categories.xml which contains your category names like this:</li>
</ul>
<pre class="prettyprint lang-xml">
<view:view xmlns:view="http://www.alfresco.org/view/repository/1.0"
xmlns:sys="http://www.alfresco.org/model/system/1.0"
xmlns:cm="http://www.alfresco.org/model/content/1.0">
<cm:category>
<cm:name>My Categories</cm:name>
<cm:subcategories>
<cm:category>
<cm:name>My first category</cm:name>
<cm:subcategories>
<cm:category>
<cm:name>My second category</cm:name>
</cm:category>
<cm:category>
<cm:name>My third category</cm:name>
</cm:category>
<cm:category>
<cm:name>My last category</cm:name>
</cm:category>
</cm:subcategories>
</cm:category>
</cm:subcategories>
</cm:category>
</view:view>
</pre>
<br />David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com1tag:blogger.com,1999:blog-7954468691908846961.post-30980799499423431502013-01-22T08:25:00.001-08:002013-01-22T08:27:36.335-08:00The cat named Tom needs some foodI can't count how often I installed Apache Tomcat for testing and development purposes. More interesting customers often already have their own Application Servers running as part of their infrastructure. So I had not that often to configure a Tomcat application container for production purposes. This article explains the production configuration of Apache Tomcat (6/7).<br />
<br />
So here are the steps:<br />
<br />
<ol>
<li>Configure the ports by editing the server.xml file. (Shutdown port, Connector port, AJP port, SSL port)</li>
<li>Add a manager role by editing the tomcat-users.xml file. The syntax is: <role rolename="admin"/> <role rolename="manager"/> <user usrname="$uname" roles="manager, admin" password="$upwd"/>. This allows you to access the Tomcat Manager application.</li>
<li> Most important tweak the memory settings because Java apps are quite hungry. You can do this by editing the batch or shell script which is named "setenv". Here an example for the JAVA_OPTS: -server -Xss1024K -Xms1G -Xmx2G -XX:MaxPermSize=128M -XX:NewSize=512m -XX:+UseConcMarkSweepGC -XX:+CMSIncrementalMode -XX:CMSInitiatingOccupancyFraction=80 . This reserves 1GB-2GB memory for the JVM by also changing the garbage collection behavior a bit. (The explainations are available here: <a href="http://www.oracle.com/technetwork/java/javase/tech/vmoptions-jsp-140102.html">http://www.oracle.com/technetwork/java/javase/tech/vmoptions-jsp-140102.html</a>) </li>
<li>Make sure that the directory listings are disabled by editing the default web.xml file. It defines a default servlet which has a parameter which is named 'listings'. The parameter value should be 'false'.</li>
<li>You could use a Valve to restrict the access to specific IP-s or hosts (<a href="http://tomcat.apache.org/tomcat-6.0-doc/config/valve.html">http://tomcat.apache.org/tomcat-6.0-doc/config/valve.html</a>) but I think this is more a task of a firewall.</li>
<li>I usually use specific users for specific services. So I would use a user named 'tomcat' as the installation owner who also runs it. It's not recommended to run Tomcat as an Administrator or the Root user. This means to run it on ports >1000, which can be solved by putting an Apache HTTP server in front of it.</li>
<li>Use GZip compression by editing the server.xml file again. There should be at least one Connector defined. Here an example: <Connector port="8080" URIEncoding="UTF-8" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" compression="on" compressableMimeType="text/html,text/xml,text/plain,application/xml/>. It means basically that resources are compressed on side of the server before they will be transfered to the client. This can help to increase the performance.</li>
</ol>
Any further recommendations for the production usage of Apache Tomcat? Feel free to reply to this post! <br />
<ol>
</ol>
<br />David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com2tag:blogger.com,1999:blog-7954468691908846961.post-42020139727987721632013-01-14T08:39:00.002-08:002013-01-14T10:25:23.108-08:00Resolving Share extension build problems if using MavenA few weeks ago I did a blog post where I explained how simple it is to set up Alfresco projects by using Maven. Today I tried to add some Share extensions and found out that there is an issue with it. If you use the default pom.xml build script which was created the way which I mentioned before, then you may miss some dependencies. The problem begins with the fact that Alfresco added the Share dependencies as a WAR-file dependency which can't be resolved by Eclipse's Maven plug-in. I tried out to add the libraries by hand to the Build Path, but this causes that you can build within Eclipse but no longer by using Maven. So the way how I solved it was to add some additional dependencies and repositories:<br />
<br />
You should add the following repository (Not sure if it was already resolved by Alfresco's Maven Nexus).<br />
<br />
<pre class="prettyprint lang-xml"><repository>
<id>spring-surf</id>
<url>https://extensions.springframework.org/milestone</url>
</repository>
</pre>
Then I added the following dependencies:<br />
<br />
<pre class="prettyprint lang-xml"> <dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>3.0.1.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.extensions.surf</groupId>
<artifactId>spring-webscripts</artifactId>
<version>1.0.0.M3</version>
</dependency>
<dependency>
<groupId>org.springframework.extensions.surf</groupId>
<artifactId>spring-webscripts-api</artifactId>
<version>1.0.0.M3</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework.extensions.surf</groupId>
<artifactId>spring-surf</artifactId>
<version>1.0.0</version>
</dependency>
</pre>
<br />
Now it was at least possible to build my Share extension. It may be required to add further depencies in order to have full support.David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com1tag:blogger.com,1999:blog-7954468691908846961.post-22127025790816378732013-01-14T05:50:00.002-08:002013-01-14T06:19:50.002-08:00How to disable localization in Alfresco ShareIf you have the requirement that Alfresco Share should be available in only one single language then this is not that trivial. By default Alfresco Share takes the web browser language into account. There is out of the box no way to choose the language. This post describes how to set the language to just the English one. What you need to know is that there is a Spring Bean with the Id 'localeResolver'. So we need to override the Bean by using an own implementation of it.If you do not know the Spring framework, then what you need to know at this point is that you can configure Java Classes as Beans by using XML. An instance of the Class is then available via the Spring Context. So you get get an instance of the Class by asking the Spring Context for a Bean with a specific id. It's possible to have multiple instances with different id-s and parameters. So a lot of stuff in Alfresco is accessible via Spring Beans. If something is available via the above mentioned context, then you can just override it. This changes Alfresco's default behavior. The reason why it works is that the custom configuration becomes loaded later than the original configuration and so the original Spring Bean definition becomes overridden. Here the steps:<br />
<ol>
<li>In '${TOMCAT_HOME}/shared/classes/alfresco/web-extension' create a context file by naming it to 'custom-slingshot-application-context.xml'. I believe the only important thing here is that it ends with '-context.xml'.</li>
<li>In this file define a Spring Bean by using the following code:</li>
</ol>
<pre class="prettyprint lang-xml"> <?xml version='1.0' encoding='UTF-8'?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:hz="http://www.hazelcast.com/schema/config"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
http://www.hazelcast.com/schema/config
http://www.hazelcast.com/schema/config/hazelcast-spring.xsd">
<bean id='localeResolver' class='de.ecmgeek.alfresco.MyLocaleResolver'/>
</beans></pre>
<br />
<br />
Now you can just implement your own LocaleResolver and put it to the classpath (E.G. as a JAR file):<br />
<br />
<pre class="prettyprint lang-java">
<code>package de.ecmgeek.alfresco;
import java.util.Locale;
import javax.servlet.http.HttpServletRequest;
import org.springframework.extensions.surf.mvc.LocaleResolver;
import org.springframework.extensions.surf.util.I18NUtil;
public class MyLocaleResolver extends LocaleResolver
{
@Override
public Locale resolveLocale(HttpServletRequest request)
{
/* Here we could set the locale by getting the value of the
cookie with the name ALFRESCO_UI_PREFLANG or by handling
a request parameter. For now this value is just null. */
Locale locale = null;
if (locale == null)
{
//To set a constant value
locale = I18NUtil.parseLocale("en_EN");
}
I18NUtil.setLocale(locale);
return locale;
}
} </code>
</pre>
David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com0tag:blogger.com,1999:blog-7954468691908846961.post-30204392115586822882013-01-14T02:00:00.001-08:002013-01-14T03:47:40.425-08:00How to externalize the SOLR instance which comes with Alfresco 4.xAlfresco 4.x uses SOLR instead Lucene. In fact SOLR is just a Lucene index with a service on top of it. Furthermore it provides meanwhile some new features (search facettes, joins, ...) If you install Alfresco Enterprise 4.x by using the installation package (bundled with PostgreSQL and Apache Tomcat), then it is already configured to use the bundled SOLR 1.4. The search service is then deployed as a web application to the Tomat servlet container. A better idea is to deploy SOLR to an own Tomcat server which then has its own Java environment and so on. The second Tomcat instance is running on the same server host, but now a little bit more isolated from the Alfresco instance. Here the steps:<br />
<br />
<ol>
<li>Make a new directory 'tomcat_solr' in the Alfresco installation directory $ALF_HOME</li>
<li>Copy the contents of the folder 'tomcat' to the folder 'tomcat_solr'</li>
<li>In 'tomcat_solr/webapps' undeploy the 'share' and 'alfresco' applications, by removing the folders. Also remove the files 'alfresco.war' and 'share.war' to avoid that Alfresco becomes redeployed.</li>
<li> In 'tomcat_solr/webapps/shared/classes' and 'tomcat_solr/logs' remove everything below it. Also remove 'tomcat_solr/conf/Catalina/localhost/alfresco.xml'. You now have a kind of clean Tomcat instance.</li>
<li>Edit the server's configuration by changing the ports. The shutdown port should be '8095', the connector port should be '8090', the SSL port should be '8449', the AJP port should be 8099. You now have a Tomcat instance which does not conflict with the Alfresco one.</li>
<li>Open the file 'tomcat_solr/conf/Catalina/localhost/solr.xml'. You can see that the home directory of SOLR is set to 'alf_data/solr'. You can change this if you want to store the index files at another location. Also the SOLR web app archive is stored there.</li>
<li>SOLR is configured to use 2 cores. This means that you can find the 2 subfolders 'alf_data/solr/archive-SpacesStore' and 'workspace-SpacesStore'. You can see this maps to Alfresco's content stores. Each SOLR core has its own configuration. In the 'solcore.properties' file you can specify where the index files should be stored. The property 'data.dir.root' points to 'alf_data/solr' for both stores. The 'alfresco.*' settings are used to define which Alfresco instance (host, port, store, interval, ...) is used.</li>
<li>More about the keystore is available here <a href="http://docs.alfresco.com/4.1/topic/com.alfresco.enterprise.doc/tasks/generate-keys-solr.html">http://docs.alfresco.com/4.1/topic/com.alfresco.enterprise.doc/tasks/generate-keys-solr.html</a>, currently it's just important that you know that your new Tomcat instance is already configured to use the already existing one. It is located under 'alf_data/keystore'. Also the file 'tomcat_solr/conf/tomcat-users.xml' does already contain the required user definition.</li>
<li>Finally you need to remove the Solr stuff from the old Tomcat installation, and to change the Alfresco configuration (tomcat/shared/classes/alfresco-global.properties' to use the SSL port which was specified for SOLR (8849). Therefore the property 'solr.port' should be changed. If you also moved the index keystore then you need to change the 'dir.keystore' property.</li>
<li>Now start Alfresco!</li>
<li>Now start the Tomcat which hosts the SOLR instance. There should be no error in the log file.</li>
<li>Log-in to Share, create a new document by setting some attributes.</li>
<li>Wait a few seconds (SOLR polls Alfresco!) and then check the log files of SOLR's Tomcat! Afterwards perform a search by using Alfresco Share!</li>
</ol>
<br />
<ol>
</ol>
David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com0tag:blogger.com,1999:blog-7954468691908846961.post-80561367769292737322012-12-23T05:16:00.002-08:002013-10-13T23:23:03.010-07:00Mixing Bootstrap with JSPA few days ago I wrote a blog post about my first contact with Twitter's Bootstrap UI framework. What I showed was how to create a simple static web site which uses java script in order to set a content area. The article can be found here: <a href="http://ecmgeek.blogspot.de/2012/12/first-contact-with-bootstrap.html">http://ecmgeek.blogspot.de/2012/12/first-contact-with-bootstrap.html</a><br />
<br />
This article will show how to mix Bootstrap with JSP pages to bring a bit more dynamic into the page. Here some requirements:<br />
<br />
<ul>
<li>A simple HTML template which uses Bootstrap should be used to show a web site.</li>
<li>A site should have multiple pages. The site navigation should allow to navigate to the pages.</li>
<li>It should be possible to navigate through a page by using a simple navigation menu.</li>
<li>A page should show some HTML content.</li>
</ul>
So we can derive the following Java classes :<br />
<ul>
<li><b>Site:</b> A site has a name and a description. One site is associated to multiple pages.</li>
<li><b>Page:</b> A page has a name, an id and a target URL. It also has exactly one SubMenu and one HTMLContent item.</li>
<li><b>SubMenu:</b> A sub menu has multiple menu items.</li>
<li><b>SubmenuItem: </b>A sub menu item has a name and a target URL.</li>
<li><b>HTMLContent:</b> Has just a String property to store the HTML. May be used as Base class for other Content items.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii6mU65zRYOr7EP4muN9gUM-ARqPnZWT3g1pJmjtowOU5O7ARQhKFnzveMqF2QIZgdNhXGnjvTwXbCMH2fGTFci8DSvSxl7XslNahtwg-rbIrm0sgo2PlCc8TnkwPfxVqn126LgvKzksR-/s1600/jspmeetsbootstrap.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii6mU65zRYOr7EP4muN9gUM-ARqPnZWT3g1pJmjtowOU5O7ARQhKFnzveMqF2QIZgdNhXGnjvTwXbCMH2fGTFci8DSvSxl7XslNahtwg-rbIrm0sgo2PlCc8TnkwPfxVqn126LgvKzksR-/s640/jspmeetsbootstrap.png" width="640" /></a></div>
<br />
So what can now do is to create a Site instance (which is indeed kept on the server side - and so a servlet container is required to host the application) in order to provide our site template with the required content.<br />
<br />
<pre class="prettyprint lang-java">package de.ecmgeek.bootstrap;
public class Demo {
private Site site;
public Demo() {
site = new Site("Demo", "This is a demo page");
Page home = new Page("Home",new HTMLContent("<b> Home ... </b>"));
Submenu homeSubMenu = new Submenu();
SubmenuItem homeItem1 = new SubmenuItem("HomeSection1","#section1");
SubmenuItem homeItem2 = new SubmenuItem("HomeSection2","#section2");
SubmenuItem homeItem3 = new SubmenuItem("HomeSection3","#section3");
homeSubMenu.addItem(homeItem1);
homeSubMenu.addItem(homeItem2);
homeSubMenu.addItem(homeItem3);
home.setSubmenu(homeSubMenu);
Page about = new Page("About",new HTMLContent("<b> About ... </b>"));
Submenu aboutSubMenu = new Submenu();
SubmenuItem aboutItem1 = new SubmenuItem("AboutSection1","#section1");
SubmenuItem aboutItem2 = new SubmenuItem("AboutSection2","#section2");
SubmenuItem aboutItem3 = new SubmenuItem("AboutSection3","#section3");
aboutSubMenu.addItem(aboutItem1);
aboutSubMenu.addItem(aboutItem2);
aboutSubMenu.addItem(aboutItem3);
about.setSubmenu(aboutSubMenu);
Page contact = new Page("Contact",new HTMLContent("<b> Contact ... </b>"));
Submenu contactSubMenu = new Submenu();
SubmenuItem contactItem1 = new SubmenuItem("ContactSection1","#section1");
SubmenuItem contactItem2 = new SubmenuItem("ContactSection2","#section2");
SubmenuItem contactItem3 = new SubmenuItem("ContactSection3","#section3");
contactSubMenu.addItem(contactItem1);
contactSubMenu.addItem(contactItem2);
contactSubMenu.addItem(contactItem3);
contact.setSubmenu(contactSubMenu);
site.add(home);
site.add(about);
site.add(contact);
}
public Site getSite() {
return site;
};
}</pre>
<br />
The class Demo is only used for demonstration purposes. Usually we would use a persistence layer like Hibernate or JPA to read the site data from a database.<br />
<br />
The next step is to change our more or less static web site to use a Site which is provided from the server. For this purposes we use J(ava)S(erver)P(ages). It's just easy to use and to learn and you can access your beans directly via Scriptlets and expressions. Another, the more new school way, would be to export the site data via a RESTFul Web Service which talks J(ava)S(ript)O(bject)N(otation). The advantage of the second way is that you can use the data out of the box after you got it from the server with Java Script without the need to use something like JSP scriptlets to "inject" the whole data into your HTML. However, let's go with JSP here.<br />
<br />
So our previous HTML page becomes now a JSP page, which looks like the following one:<br />
<br />
<pre class="prettyprint lang-html"><!-- (0) Create an empty HTML page -->
<!DOCTYPE html>
<%@page import="de.ecmgeek.bootstrap.SubmenuItem"%>
<%@page import="de.ecmgeek.bootstrap.Page"%>
<%@page import="de.ecmgeek.bootstrap.Demo"%>
<%@page import="de.ecmgeek.bootstrap.Site"%>
<%@page import="de.ecmgeek.bootstrap.HTMLContent"%>
<html>
<!-- (1) Some basic header info -->
<head>
<meta charset="utf-8">
<title>BootstrapMeetsJSP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- (2) Import the provided CSS file -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- Do some JAVA initialization work -->
<%
//Build some demo data
Site site = new Demo().getSite();
%>
<!-- (3) Import jQuery and Bootstrap -->
<script src="js/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- (5) At last add some JavaScript (jQuery) here to fill the page with life -->
<script>
$(document).ready(function(){
//Inject some JAVA code into the JavaScript calls
<%
for (Page p : site.getPages())
{
out.println("$('#"+ p.getId() +"').click(function(){");
out.println("$('div.my-content').empty();");
out.println("$('ul.nav-list').empty();");
out.println("$('div.my-content').html('"+p.getContent().getHtml()+"');");
//Set the content and the submenu
for (SubmenuItem sm : p.getSubmenu().getItems())
{
out.println("$('ul.nav-list').append('<li><a href=\"" + sm.getTarget() +"\"><i class=\"icon-chevron-right\"></i>"+ sm.getName() +"</a></li>');");
}
out.println("});");
}
%>
});
</script>
<!-- (4) Bootstrap decorated HTML here -->
<div id="container">
<!-- A navigation header bar which is fixed to the top -->
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#"><%=site.getName()%></a>
<ul id="header" class="nav">
<%
for (Page p : site.getPages())
{
out.print("<li><a href='"+p.getTarget()+"'id='"+p.getId()+"'>"+p.getName()+"</a></li>");
}
%>
</ul>
</div>
</div>
<!-- (4.1) A simple web site header -->
<div class="hero-unit">
<h1><%=site.getName()%></h1>
<p><%=site.getDesc()%></p>
<p>
</p>
</div>
<!-- (4.2) A HTML grid with 12 columns, in this case we -->
<div class="row">
<!-- 4 columns are used for the left hand side navigation bar -->
<div class="span4 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
</ul>
</div>
<!-- (4.3) 8 columns are used for the right hand side content area -->
<div class="span8">
<!-- (4.4) The content area which can be decorated by own css -->
<div class="my-content">
</div>
</div>
</div>
</div>
</body>
</html></pre>
The result looks quite identical to the static page, but with the difference that the site data is now provided from the server to the client.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8DfLWg9QbBoVwSEV8HULCicAcAvhtRpjowU0tegDVzJ3MUb1VU9RlPcNjGVaIVM8n1JN218yVBGPD11Guki77NI8pfHl1cg-7ifkHKYo2OQxyAU7hKPFsvnAEUZcZHyFeS4LwkrDe1UO/s1600/bootstrapmeetsjsp_demo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8DfLWg9QbBoVwSEV8HULCicAcAvhtRpjowU0tegDVzJ3MUb1VU9RlPcNjGVaIVM8n1JN218yVBGPD11Guki77NI8pfHl1cg-7ifkHKYo2OQxyAU7hKPFsvnAEUZcZHyFeS4LwkrDe1UO/s640/bootstrapmeetsjsp_demo.png" width="640" /></a></div>
<br />
<br />
In summary the following happens:<br />
<br />
<ul>
<li>Java code is used to generate the JavaScript code dependent on the site data which is provided by the server</li>
<li>The generated JavaScript code is used in order to manipulate the web site's HTML code dependent on the actions (click on the header menu item)</li>
<li>The HTML will be rendered on the client side (browser, ...) </li>
</ul>
<br />
It's easy to see that these are the basics to build a very simple W(eb)C(ontent)M(anagement) system which is based on Bootstrap. A next article will follow where I will describe how to add a database connection in order to retrieve the site data from a database. I can even imagine to create a simple Bootstrap based authoring web application which can be used to add data to this database. <br />
<br />
<br />David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com2tag:blogger.com,1999:blog-7954468691908846961.post-52742274485058436752012-12-22T07:15:00.000-08:002012-12-25T16:11:30.361-08:00Site tracking with PiwikI used Piwik in a previous Web Community project. So when I was asked how to add web statistics to Alfresco, my first idea was to integrate it with Piwik. So let's start to try it out:<br />
<br />
At first a Piwik installation is required. My target test system is an OpenSuse 12.1 and so all the dependencies are available from the software repository. They are further described here: <a href="http://piwik.org/docs/requirements/">http://piwik.org/docs/requirements/</a> .<br />
<br />
So after you installed an Apache, all required PHP modules and a MySQL database (BTW: This is something which I do not like regarding Piwik. The only supported database is MySQL. I would like to see at least Postgres support. ) you can begin to install your Piwik instance. Therefore you can follow the following instructions: <a href="http://piwik.org/docs/installation/">http://piwik.org/docs/installation/</a> .<br />
<br />
The most interesting part may be the database setup:<br />
<br />
<pre class="prettyprint lang-bash">mysql> CREATE USER 'piwik'@'localhost' IDENTIFIED BY '${Your pwd here}';
mysql> CREATE DATABASE piwikdb;
mysql> GRANT ALL PRIVILEGES ON piwikdb.* TO 'piwik'@'localhost' WITH GRANT OPTION;</pre>
<br />
<br />
Then unzip the latest Piwik zip to your Apache2 web server and open the URL 'http://localhost/piwik'. For OpenSuse the htdocs folder is located at '/srv/www'.<br />
<br />
If calling Piwik the first time it will prompt you to perform the following file permission changes:<br />
<br />
<pre class="prettyprint lang-bash">chown -R www-data:www-data /srv/www/htdocs/piwik
chmod -R 0777 /srv/www/htdocs/piwik/tmp
chmod -R 0777 /srv/www/htdocs/piwik/tmp/templates_c/
chmod -R 0777 /srv/www/htdocs/piwik/tmp/cache/
chmod -R 0777 /srv/www/htdocs/piwik/tmp/assets/
chmod -R 0777 /srv/www/htdocs/piwik/tmp/tcpdf/
</pre>
<br />
It's maybe required to create the user, group or directories above. You should also enable a temp. write access to '/srv/www/htdocs/piwik/config/'.<br />
<br />
An error occurs that your php installation need zlib-suppot. You can find 'php5-zlib' in the OpenSuse software repository. Do not forget to restart Apache after installing this extension.<br />
<br />
The next steps are quite easy. Just follow the Installation Wizard by entering your database connection details. <br />
<br />
Also part of the installation is the generation of the tracking code. The installer says: "Here is the JavaScript Tracking code to include on all your pages, just before the </body> tag"<br />
<br />
<pre class="prettyprint lang-html"><!-- Piwik -->
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://localhost/piwik/" : "http://localhost/piwik/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script><noscript><p><img
src="http://localhost/piwik/piwik.php?idsite=1" style="border:0" alt=""
/></p></noscript>
<!-- End Piwik Tracking Code --></pre>
<br />
Important is the 'idsite' property. The value '1' is the id of the site which I configured as 'http://localhost:8080/share'. OK, Piwik is now up and running. Now let's investigate how to customize Alfresco in order to use it.<br />
<br />
So to enable global tracking we can search a header or footer element which is used by every page of Alfresco. So let's check which site web scripts are available and let's see if we can put our snippet to one of the freemarker templates.<br />
<br />
One good candidate seems to be '${WEBAPPS}/share/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/header'. So I just placed the script above after the first other '<script>' block.<br />
<br />
A test showed the following result:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGs56ymgLMUmTQrRQiRWZJyh2ZEoic-byxoZXcZN5EHVjHYj6bjE5XXfYuwgLXCeYviZq1G7AQr1j_XasV9pEmtxh1Ri3LDk2qT5v15J5nUFWpMOTI3tEo63ZGyMMTeBvJLQ4A8PkHosrl/s1600/site-accesses.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="319" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGs56ymgLMUmTQrRQiRWZJyh2ZEoic-byxoZXcZN5EHVjHYj6bjE5XXfYuwgLXCeYviZq1G7AQr1j_XasV9pEmtxh1Ri3LDk2qT5v15J5nUFWpMOTI3tEo63ZGyMMTeBvJLQ4A8PkHosrl/s320/site-accesses.png" width="320" /></a></div>
<br />
Piwik can do a lot more. But for now this shows exactly what we required. It answers the question which site was accessed how often.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com2tag:blogger.com,1999:blog-7954468691908846961.post-48101655629935695382012-12-20T04:15:00.002-08:002012-12-25T16:15:25.181-08:00First contact with BootstrapInsprired by Thomas Glaser and Jan Pfitzner, I thought it could be a good idea to get in contact with Twitter's Bootstrap framework. So here a simple skeleton page which uses Bootstrap components to reflect a simple web site. jQuery is used to interact with menu and the content area.<br />
<br />
Here the result:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZYCx4l3LBtJOrPWG_PJia8nocxo3Prd-LfFyP99-m4NG0vfhzwzSYxZWqTscn5r5Vqio93u19HIXbgAzoDflv52xfY-LCD4zaPAaFhlrzSVazdJws1A80fOELilQ47AiAHp03Lg893Z57/s1600/bootstrap.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZYCx4l3LBtJOrPWG_PJia8nocxo3Prd-LfFyP99-m4NG0vfhzwzSYxZWqTscn5r5Vqio93u19HIXbgAzoDflv52xfY-LCD4zaPAaFhlrzSVazdJws1A80fOELilQ47AiAHp03Lg893Z57/s640/bootstrap.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
And finally the code: <br />
<br />
<pre class="prettyprint lang-html">
<!-- (0) Create an empty HTML page --><br />
<!DOCTYPE html><br />
<html><br />
<!-- (1) Some basic header info --><br />
<head><br />
<meta charset="utf-8"><br />
<title>Basic web site</title><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
<meta name="description" content=""><br />
<meta name="author" content=""><br />
<br />
<!-- (2) Import the provided CSS file --><br />
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <br />
</head><br />
<br />
<body><br />
<!-- (3) Import jQuery and Bootstrap --><br />
<script src="js/jquery-latest.js"></script><br />
<script src="js/bootstrap.min.js"></script><br />
<br />
<!-- (5) At last add some JavaScript (jQuery) here to fill the page with life --><br />
<script><br />
$(document).ready(function(){<br />
<br />
$("#header-home").click(function() {<br />
$('div.my-content').html('<p>Home ...</p>');<br />
});<br />
<br />
$("#header-contact").click(function() {<br />
$('div.my-content').html('<p>Contact ...</p>');<br />
});<br />
<br />
<br />
$("#header-about").click(function() {<br />
$('div.my-content').html('<p>About ...</p>');<br />
});<br />
<br />
$("#header-contact").click(function() {<br />
$('div.my-content').html('<p>Contact ...</p>');<br />
});<br />
<br />
}); <br />
</script><br />
<br />
<br />
<!-- (4) Bootstrap decorated HTML here --><br />
<div id="container"><br />
<br />
<!-- A navigation header bar which is fixed to the top --><br />
<div class="navbar navbar-fixed-top navbar-inverse"><br />
<div class="navbar-inner"><br />
<a class="brand" href="#"> Basic web site</a><br />
<ul id="header" class="nav"><br />
<li class="active"><a href="#" id="header-home">Home</a></li><br />
<li><a href="#about" id="header-about">About</a></li><br />
<li><a href="#contact" id="header-contact">Contact</a></li><br />
</ul><br />
</div><br />
</div><br />
<br />
<!-- (4.1) A simple web site header --> <br />
<div class="hero-unit"><br />
<h1>Basic web site</h1><br />
<p>This site explains the Twitter Bootstrap a little bit.</p><br />
<p><br />
</p><br />
</div><br />
<br />
<br />
<!-- (4.2) A HTML grid with 12 columns, in this case we --><br />
<div class="row"><br />
<!-- 4 columns are used for the left hand side navigation bar --><br />
<div class="span4 bs-docs-sidebar"><br />
<ul class="nav nav-list bs-docs-sidenav"><br />
<li><a href="#Marker1"><i class="icon-chevron-right"></i> Marker 1</a></li><br />
<li><a href="#Marker2"><i class="icon-chevron-right"></i> Marker 2</a></li><br />
<li><a href="#Marker2"><i class="icon-chevron-right"></i> Marker 3</a></li><br />
</ul><br />
</div><br />
<br />
<!-- (4.3) 8 columns are used for the right hand side content area --><br />
<div class="span8"><br />
<br />
<!-- (4.4) The content area which can be decorated by own css --><br />
<div class="my-content"><br />
<p> Home ...</p><br />
</div><br />
</div><br />
</div><br />
</div> <br />
</body><br />
</html><br />
<br /></pre>
David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com0tag:blogger.com,1999:blog-7954468691908846961.post-79945355629920290232012-12-14T13:07:00.000-08:002012-12-25T16:17:07.849-08:00About the anatomy of ArchiveLink<u><b>Preamble </b></u><br />
<br />
I just played arround with ArchiveLink, and so I decided to read the specification to inform myself how it internally works. What you can use in order to archive your SAP documents (invoices, ...) is an ArchiveLink speaking HTTP Content Server. So here a short summary of what I understood from the ArchiveLink specification so far.<br />
<br />
<u><b>Terms</b></u><br />
<br />
We want to store documents inside a content repository. I guess it is not required to explain this term further. ArchiveLink knows the term 'component', whereby a component represents a content unit on a administrative level. Several component types are used (for instance 'data'), Components are summarized via a document header. So here a scenario:<br />
<br />
<ul>
<li>One Content Repository contains multiple document headers</li>
<li>One document header references multiple components</li>
<li>One component contains one content unit</li>
</ul>
A document header (id, status, date, ...) and a component (content type, status, ...) has some adminstrative meta data attached. <br />
<br />
So an archive needs to reflect that terms somehow. The most intuitive way seems to reflect it by using folders. So the content repository contains a folder of the type header which contains component folders those are containing documents to keep the content. Important is that ArchiveLink does by design not transfer any SAP business object related meta data. Only administrative meta data is transfered to the archive.<br />
<br />
<u><b>The protocol</b></u><br />
<br />
HTTP is used to exchange date on a lower level. So we are speaking about a kind of RESTFul service access. The format is 'http://${server}:${port}/${service name}/${command}?${command parameters}. If we take security into account (more about it later) and take a spot on the get command by retrieving the data component then the URL has the following format:<br />
<br />
http://${host}:${port}/${service name}?get&contRep=${repo id}&docId=${doc id}&compId=data&accessMode=r&authId=${user id}&expiration=${time}?secKey=${base64 encoded security key}.<br />
<br />
The following commands are available:<br />
<br />
<ul>
<li>get: get a content unit</li>
<li>info: get info about a document</li>
<li>docGet: get the whole content</li>
<li>create: Create a new document</li>
<li>update: Modify an existing document</li>
<li>append: Append data to a content unit </li>
<li>search: Search by using a pattern inside a content unit (full text search)</li>
<li>attrSearch: Search for a specific attribute value</li>
<li>mCreate: Create new documents</li>
<li>serverInfo: Retrieve information about the content server</li>
<li>putCert: Transfer the client certificate </li>
</ul>
The resonse is a little bit old scool (the specification document is from 2001) and so does not return JSON, but Multipart Form Data. <br />
<br />
Here an example response from the publically available specification document:<br />
<br />
<pre class="prettyprint lang-bash">
<i><span style="font-size: x-small;">HTTP/1.1 200 (OK)<br />Server: Microsoft-IIS/4.0<br />Date: Wed, 04 Nov 1998 07:41:03 GMT<br />Content-Type: multipart/form-data; boundary=A495ukjfasdfddrg4hztzu...<br />...some more header informations...<br />Content-Length: 32413<br />X-dateC: 1998-10-07<br />X-timeC: 07:55:57<br />X-dateM: 1998-10-07<br />X-timeM: 07:55:57<br />X-contRep: K1<br />X-numComps: 2<br />X-docId: ID<br />X-docStatus: online<br />X-pVersion: 0045<br />--A495ukjfasdfddrg4hztzu898aA0jklmAxcvla12319981147528895<br />Content-Type: application/x-alf; charset=<br />Content-Length: 2591<br />X-compId: descr<br />X-Content-Length: 2591<br />X-compDateC: 1998-10-07<br />X-compTimeC: 07:55:57<br />X-compDateM: 1998-10-07<br />SAP AG SAP ArchiveLink (BC-SRV-ARL)<br />docGet<br />April 2001 265<br />X-compTimeM: 07:55:57<br />X-compStatus: online<br />X-pVersion: 0045<br />...component data ...<br />--A495ukjfasdfddrg4hztzu898aA0jklmAxcvla12319981147528895<br />Content-Type: application/x-alf; charset=<br />Content-Length: 29313<br />X-compId: data<br />X-Content-Length: 29213<br />X-compDateC: 1998-10-07<br />X-compTimeC: 07:55:57<br />X-compDateM: 1998-10-07<br />X-compTimeM: 07:55:57<br />X-compStatus: online<br />X-compStatus: online<br />X-pVersion: 0045<br />...component data ...<br />--A495ukjfasdfddrg4hztzu898aA0jklmAxcvla12319981147528895--<br />Beim docGet-Kommando auf ein leeres Dokument steht im Response-Body beispielsweise:<br />--A495ukjfasdfddrg4hztzu898aA0jklmAxcvla1231999102562159269<br />--A495ukjfasdfddrg4hztzu898aA0jklmAxcvla1231999102562159269--</span></i></pre>
<b><u>Summary</u></b><br />
<br />
This is the furst article of several ones those are focusing on ArchiveLink. What we should have learned is the following: An ArchiveLink archive can be realized by using a HTTP Content Server. The Content Server then could speak with a simple File System or even better an DMS. The content server provides several commands and functions to store and access content items. There are several kinds of content items, wrapped by components. A specific URL pattern is used on side of the HTTP Content Server. The response of the HTTP Content Server has the Multipart Form Data format.<br />
<br />
<br />David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com0München, Deutschland48.1366069 11.577085147.967062399999996 11.2612281 48.3061514 11.892942099999999tag:blogger.com,1999:blog-7954468691908846961.post-21473415245597370562012-12-03T09:41:00.002-08:002012-12-25T16:21:43.282-08:00How to setup an Alfresco Maven project in a few steps <u><b>Install the tools and libraries</b></u><br />
<ol>
<li> Install Maven (E.G. use 'sudo apt-get install maven2')</li>
<li>Install Subversion (E.G. use 'sudo apt-get install subversion')</li>
<li>Install the Subversion Java bindinds (E.G. use 'sudo apt-get install libsvn-java) </li>
</ol>
<b><u> Install Eclipse and the required plug-ins</u></b> (optional)<br />
<ol>
<li>Install Eclipse (you will need it as the I(ntegrated) D(evelopment) E(nvironment)</li>
<li>Install the Eclipse Maven plug-in (The download site is 'http://download.eclipse.org/technology/m2e/releases'</li>
<li>Install the Subversion plug-in (The easisest is to enter subversion in the Eclipse Market Place)</li>
<li>In Eclipse create a new workspace</li>
</ol>
<b><u>Create the project for the repository extension</u><u>s</u></b><br />
<ol>
<li> Change the directory to the Eclipse workspace</li>
<li>Then run the following command </li>
</ol>
<blockquote class="tr_bq">
<pre class="prettyprint lang-bash">mvn archetype:generate -DarchetypeGroupId=org.alfresco -DarchetypeArtifactId=maven-alfresco-amp-archetype \
-DarchetypeVersion=3.9.1 -DgroupId=${Your domain here, E.G. de.ecg} -DartifactId=${Your project name -repo here, E.G. my-repo} -Dversion=1.0-SNAPSHOT \
-DarchetypeRepository=<a class="external free" href="https://artifacts.alfresco.com/nexus/content/repositories/releases" rel="nofollow">https://artifacts.alfresco.com/nexus/content/repositories/releases</a> -DinteractiveMode=false</pre>
<pre> </pre>
</blockquote>
The above command contains 2 place holders. One specifies your domain the other one should name the project. For example the project 'my-repo' will be created.<br />
<br />
<u><b>Create the project for the Share extensions</b></u><br />
<ol>
<li> Change the directory to the Eclipse workspace</li>
<li>Then run the following command</li>
</ol>
<br />
<blockquote class="tr_bq">
<pre class="prettyprint lang-bash">mvn archetype:generate -DarchetypeGroupId=org.alfresco.maven -DarchetypeArtifactId=maven-alfresco-share-archetype \
-DarchetypeVersion=3.9.1 -DgroupId=${Your domain here} -DartifactId=${Your project name -share here} -Dversion=1.0-SNAPSHOT \
-DarchetypeRepository=<a class="external free" href="https://artifacts.alfresco.com/nexus/content/repositories/releases" rel="nofollow">https://artifacts.alfresco.com/nexus/content/repositories/releases</a> -DinteractiveMode=false</pre>
<pre> </pre>
</blockquote>
<u><b>Create the Eclipse projects</b></u><br />
<ol>
<li>Open Eclipse</li>
<li>Click on 'Import -> Maven -> Existing Maven Project into Workspace'</li>
<li>Navigate into the folder of the repo project and confirm</li>
<li>The download of the several dependent artifacts / libraries to your local Maven cache may take a while</li>
<li>Do the same for the Share project</li>
</ol>
A really cool and easy way to get an Alfresco project set up quite simpler than with ANT script. In the pom.xml you can see that the referenced Alfresco version is 4.0.2b which seems to be an older Community Edition release. An open question is how to setup a similar project for the Alfresco Enterprise Edition. <br />
<ol>
</ol>
David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com2tag:blogger.com,1999:blog-7954468691908846961.post-40167575579333371662012-07-25T08:54:00.000-07:002012-12-25T16:24:30.654-08:00How to enable DQL tracingI am currently analyzing some Documentum performance issues. To be able to reconstruct the problem maybe more easier or to check the database indexes it is useful to identify the problematic DQL queries. DQL is Documentum's Query Language. In fact a DQL statement is translated into an SQL one. The Documentum Administrator can return you the SQL for every running DQL. So what you need to get the DQL is to add the following lines to your dfc.properties file on side of your Content Server installation (E.G. ./product/6.5/shared/config/dfc.properties):<br />
<blockquote class="tr_bq">
<pre class="prettyprint lang-bsh">
<em><span style="font-size: x-small;">dfc.tracing.enabled = false<br />dfc.tracing.recordParameters = on<br />dfc.tracing.recordReturnValue = on<br />dfc.tracing.stackDepth = 100<br />dfc.tracing.combineDMCL = on<br />dfc.tracing.dir = /tmp/dfclogs</span></em></pre></blockquote>
Any further ideas how to trace the DQL? Then just post a comment to this article!David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com0tag:blogger.com,1999:blog-7954468691908846961.post-73348939980899298772012-06-20T11:19:00.002-07:002012-06-27T02:17:43.657-07:00A simple pinboard dashlet<div style="color: #666666; font-family: inherit;">
<b>0.) Preamble </b></div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
This example shows how you could develop simple Alfresco Dashlets. So here some requirements:</div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<ul style="color: #666666; font-family: inherit;">
<li>A dashlet is required to see and post short messages</li>
<li>Everybody should be able to post messages to the specific site where the dashlet is available.</li>
</ul>
<div style="color: #666666; font-family: inherit;">
<b>1.) Define the Content Model </b></div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
At first we need to define the content model for our pinboard entry type. The content model looks as the following:</div>
<div style="color: #666666; font-family: inherit;">
<br />
<br /></div>
<blockquote class="tr_bq" style="color: #666666; font-family: inherit;">
<i><span style="font-size: x-small;"><?xml version="1.0" encoding="UTF-8"?><br /><br /><!-- Model definition --><br /><model name="ecg:pinboardmodel" xmlns="http://www.alfresco.org/model/dictionary/1.0"><br /><br /> <!-- Optional meta-data about the model --><br /> <description> The pinboard model </description><br /> <author> David Maier </author><br /> <version> 1.0 </version><br /><br /> <!-- Imports are required to reference definitions in other models --><br /> <imports><br /> <import uri="http://www.alfresco.org/model/dictionary/1.0" prefix="d" /><br /> <import uri="http://www.alfresco.org/model/content/1.0" prefix="cm" /><br /> </imports><br /><br /> <!-- The name space of our model --><br /> <namespaces><br /> <namespace uri="http://www.ecmgeek.de/model/content/1.0" prefix="ecg" /><br /> </namespaces><br /> <br /><br /> <!-- Content types --><br /> <types><br /> <br /> <!-- Default types --><br /> <type name="ecg:document"><br /> <title>Document</title><br /> <parent>cm:content</parent><br /> </type><br /> <br /> <type name="ecg:folder"><br /> <title>Folder</title><br /> <parent>cm:folder</parent> <br /> </type><br /><br /> <!-- Specific types --><br /> <type name="ecg:pinboardentry"><br /> <title>PinboardEntry</title><br /> <parent>ecg:document</parent><br /> <properties><br /> <property name="ecg:subject"><br /> <type>d:text</type><br /> </property><br /> <property name="ecg:description"><br /> <type>d:text</type><br /> </property><br /> </properties><br /> </type> <br /></types><br /></model></span></i></blockquote>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
You can see that we just extended the default types by deriving the type 'ecg:pinboardentry'.</div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
I deployed the model by just adding it to the Data Dictionary.</div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
<b>2.) Prepare the site </b></div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
The next step is to prepare the site which you would like to use. This I just created a subfolder 'pinBoard' inside the site's folder.</div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
<b>3.) Create Data Web Scripts</b></div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
Two Web Scripts are required. One to add a pinboard entry to a specific site and another one to get all pinboard entries from a specific site.</div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
<b>3.1.) Add entry Web Script </b></div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
Here the descriptor:</div>
<div style="color: #666666; font-family: inherit; text-align: center;">
<span style="font-size: x-small;"><b>pinboardadd.get.desc.xml </b></span></div>
<blockquote class="tr_bq" style="color: #666666; font-family: inherit;">
<i><span style="font-size: x-small;"><?xml version="1.0" encoding="UTF-8"?><br /><webscript><br /> <shortname>Add Pinboard entry</shortname><br /> <description>To add a pinboard entry</description><br /> <url>/alfintra/pinboard/add?name={nameArgument}&amp;desc={descArgument}&amp;site={siteArgument}</url><br /> <format default="xml">extension</format><br /> <authentication>user</authentication><br /> <transaction>required</transaction><br /></webscript></span></i></blockquote>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
And the Java Script controller:</div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<blockquote class="tr_bq" style="color: #666666; font-family: inherit;">
<div style="text-align: center;">
<span style="font-size: x-small;"><b>pinboardadd.get.js</b></span></div>
<i><span style="font-size: x-small;">/**<br /> * Arguments <br /> */<br />//The target site name<br />var siteName = args["site"];<br /><br />//The name of the future entry<br />var entryName = args["name"];<br /><br />//The description of the future entry<br />var entryDesc = args["desc"];<br /><br /><br />/**<br /> * Argument validation<br /> */<br />var siteFolder = companyhome.childByNamePath("Sites/" + siteName + "/pinBoard" );<br /><br />if (siteFolder == undefined )<br />{<br /> status.code = 404;<br /> logger.log(status.code);<br /> status.message = "The site's pinBoard folder was not found. Did you prepare your site in order to use the pinboard?";<br /> logger.log(status.message);<br /> status.redirect = true;<br />}<br />else<br />{<br /> addPinboardEntry(siteFolder, entryName, entryDesc);<br />}<br /><br /><br />/**<br /> * Script logic<br /> */<br />function addPinboardEntry(siteFolder, entryName, entryDesc)<br />{<br /> logger.log("Entering addPinboardEntry");<br /> <br /> logger.log("Setting properties");<br /> var props = new Array();<br /> props["ecg:subject"] = entryName;<br /> props["ecg:description"]= entryDesc;<br /> <br /> logger.log("Creating node");<br /> siteFolder.createNode(entryName,"ecg:pinboardentry", props);<br /><br /> logger.log("Setting model");<br /> model.created = "true";<br /><br /> logger.log("Leaving addPinboardEntry");<br />}</span></i></blockquote>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
Finally the presentation template. This template shows nothing. It just redirects to the page from which the html page was called.</div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit; text-align: center;">
<span style="font-size: x-small;"><b>pinboardadd.get.html.ftl</b></span></div>
<blockquote class="tr_bq" style="color: #666666; font-family: inherit;">
<i><span style="font-size: x-small;"><script type="text/javascript"><br /><br /> var ref = document.referrer; <br /> location.replace(ref); <br /></script></span></i></blockquote>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
<b>3.2.) Get entries Web Script</b></div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
Here the descriptor:</div>
<div style="color: #666666; font-family: inherit;">
<span style="font-size: x-small;"><br /></span></div>
<div style="color: #666666; font-family: inherit; text-align: center;">
<span style="font-size: x-small;"><b>pinboardlist.get.desc.xml </b></span></div>
<blockquote class="tr_bq" style="color: #666666; font-family: inherit;">
<i><span style="font-size: x-small;"><?xml version="1.0" encoding="UTF-8"?><br /><webscript><br /> <shortname>List pinboard entries</shortname><br /> <description>To list the pinboard entries of a site</description><br /> <url>/alfintra/pinboard/list?site={siteArgument}</url><br /> <format default="xml">extension</format><br /> <authentication>user</authentication><br /> <transaction>required</transaction><br /></webscript></span></i></blockquote>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
The Java Script controller:</div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit; text-align: center;">
<span style="font-size: x-small;"><b>pinboardlist.get.js </b></span></div>
<blockquote class="tr_bq" style="color: #666666; font-family: inherit;">
<i><span style="font-size: x-small;">/**<br /> * Arguments <br /> */<br /><br />//The target site name<br />var siteName = args["site"];<br /><br />/**<br /> * Argument validation<br /> */<br />var siteFolder = companyhome.childByNamePath("Sites/" + siteName + "/pinBoard" );<br /><br />if (siteFolder == undefined )<br />{<br /> status.code = 404;<br /> logger.log(status.code);<br /> status.message = "The site's pinBoard folder was not found.";<br /> logger.log(status.message);<br /> status.redirect = true;<br />}<br />else<br />{<br /> listPinboardEntries(siteFolder);<br />}<br /><br />function listPinboardEntries(siteFolder)<br />{<br /> logger.log("Entering listPinboardEntries");<br /> logger.log("Getting all childs");<br /> model.entries = siteFolder.children;<br /> logger.log("Leaving listPinboardEntries"); <br />}</span></i></blockquote>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
The JSON output:</div>
<div style="color: #666666; font-family: inherit;">
<span style="font-size: x-small;"><br /></span></div>
<div style="color: #666666; font-family: inherit; text-align: center;">
<span style="font-size: x-small;"><b>pinboardlist.get.json.ftl </b></span></div>
<blockquote class="tr_bq" style="color: #666666; font-family: inherit;">
<i><span style="font-size: x-small;"><#escape x as jsonUtils.encodeJSONString(x)><br />{<br />"pinboard":<br /> {<br /> "entries":<br /> [<br /> <#list entries as node><br /> <#if node.properties["ecg:subject"]?exists><br /> <#if node.properties["ecg:description"]?exists> <br /> {"name":"${node.properties['ecg:subject']}", "desc":"${node.properties['ecg:description']}", "site":"${args.site}"}<br /> <#if node_has_next>,</#if> <br /> </#if><br /> </#if><br /> </#list><br /> ]<br /> }<br />}<br /></#escape></span></i></blockquote>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
<b>4.) Create the Dashlet</b></div>
<div style="color: #666666; font-family: inherit;">
The idea is now that that the controller of the Web Script accesses the data which is provided by the data web script. The controller passes the data to the model and the presentation template renders it inside a dashlet. The content is presented within the dashlet's body container.</div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
To create a new entry the URL of the 'Add Entry' Web Script is called as a form action. Here we do not use AJAX, instead a simple HTML form is used to call the entry creating Web Script. After this Web Script is called, it just redirects back to the previous page. By using additional Java Script inside the presentation template, it should be also possible to perform such an action without the need to redirect to the previous called page by refreshing this one. However, the dashlet shows how the interaction with the Data Web Scripts can basically work. The form is presented within the dashlet' toolbar container.</div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
So what we need at first is a Dashlet Descriptor:</div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit; text-align: center;">
<span style="font-size: x-small;"><b>.../site-webscripts/de/ecmgeek/components/dashlets/pinboardlist.get.desc.xml </b></span></div>
<blockquote class="tr_bq" style="color: #666666; font-family: inherit;">
<div>
<i><span style="font-size: x-small;"> </span><span style="font-size: x-small;"><span dir="ltr"><webscript><br />
<shortname>List pinboard entries</shortname><br />
<description>To list pinboard entries</description><br />
<family>site-dashlet</family><br />
<url>/components/dashlets/pinboardlist</url><br />
</webscript></span></span></i></div>
</blockquote>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
<span style="font-size: x-small;"><span dir="ltr"><span style="font-size: small;">We also need a controller which gets the data from our Data Web Script and passes it to the model:</span></span></span></div>
<div style="color: #666666; font-family: inherit;">
<span style="font-size: x-small;"><br /></span></div>
<blockquote class="tr_bq" style="color: #666666; font-family: inherit;">
<div style="text-align: center;">
<span style="font-size: x-small;"><b>.../site-webscripts/de/ecmgeek/components/dashlets/</b></span><span style="font-size: x-small;"><span dir="ltr"><span style="font-size: small;"><b>pinboardlist.get.js </b></span></span></span></div>
</blockquote>
<blockquote>
<div style="color: #666666; font-family: inherit;">
<blockquote class="tr_bq">
<span style="font-size: x-small;"><i>var siteName = page.url.templateArgs.site;<br />var data = remote.call("/alfintra/pinboard/list.json?site=" + siteName);<br />var results = eval('(' + data + ')'); <br /><br />model.entries = results.pinboard.entries;</i></span></blockquote>
</div>
</blockquote>
<div style="color: #666666; font-family: inherit;">
<span style="font-size: x-small;"><span dir="ltr"><span style="font-size: small;">Finally we need to create the dashlet's UI. You could basically add any HTML which you want to the dashlet's html template. But to integrate better with Alfresco, you should at least define the following containers:</span></span></span></div>
<ul style="color: #666666; font-family: inherit;">
<li><span style="font-size: x-small;"><span dir="ltr"><span style="font-size: small;">dashlet</span></span></span></li>
<ul>
<li><span style="font-size: x-small;"><span dir="ltr"><span style="font-size: small;">toolbar</span></span></span></li>
<li><span style="font-size: x-small;"><span dir="ltr"><span style="font-size: small;">body</span></span></span></li>
</ul>
</ul>
<div style="color: #666666; font-family: inherit;">
<span style="font-size: x-small;"><span dir="ltr"><span style="font-size: small;"> <span style="font-size: small;">If you want that your dashlet is resizable you should also instantiate an Alfresco Dashlet Resizer by using the following line inside a JavaScript block</span></span></span></span><span style="font-size: small;"><span dir="ltr">:</span></span></div>
<ul style="color: #666666; font-family: inherit;">
<li><blockquote class="tr_bq">
<span style="font-size: small;"><span dir="ltr"> new Alfresco.widget.DashletResizer("${args.htmlid}", "${instance.object.id}");)</span></span></blockquote>
</li>
</ul>
<div style="color: #666666; font-family: inherit;">
<span style="font-size: x-small;"><span dir="ltr"><span style="font-size: small;">Interesting to know is that Alfresco Share comes with a Proxy servlet which allows you to access the Data Web Scripts of the Alfresco Repository. This proxy can be also used to avoid problems with the same origin policy if using client side Java Script to access the Data Web Script.</span></span></span></div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
<span style="font-size: x-small;"><span dir="ltr"><span style="font-size: small;">Our dashlet code looks now as the following:</span></span></span></div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit; text-align: center;">
<b><span style="font-size: x-small;"><span dir="ltr"><span style="font-size: small;"> </span></span></span></b><span style="font-size: x-small;"><b>.../site-webscripts/de/ecmgeek/components/dashlets/</b><b><span dir="ltr">pinboardlist.get.html.ftl</span></b></span></div>
<div style="color: #666666; font-family: inherit;">
<span style="font-size: x-small;"><span dir="ltr"><br /></span></span></div>
<blockquote class="tr_bq" style="color: #666666; font-family: inherit;">
<div>
<i><span style="font-size: x-small;"><span dir="ltr"><script type="text/javascript">//<![CDATA[ </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
//Make the dashlet resizeable </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
new Alfresco.widget.DashletResizer("${args.htmlid}", "${instance.object.id}"); </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
//]]> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</script> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<div class="dashlet"> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<div class="title"> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
${msg("title")} </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</div> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<div class="toolbar"> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<form name="postToPinboardForm" method="get" action="/share/proxy/alfresco/alfintra/pinboard/add.html"> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<table> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<tr> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<td> </span></span></i><i><span style="font-size: x-small;"><span dir="ltr"> ${msg("subject")} </span></span></i><i><span style="font-size: x-small;"><span dir="ltr"></td> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<td> </span></span></i><i><span style="font-size: x-small;"><span dir="ltr"> ${msg("desc")} </span></span></i><i><span style="font-size: x-small;"><span dir="ltr"> </td> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<td> &nbsp; </td> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</tr> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<tr> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<td> <input type="text" name="name"> </td> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<td> <input type="text" name="desc"> </td> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<td> <input type="hidden" name="site" value="${page.url.templateArgs.site}"></td> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<td> <input type="submit" value="Post"> </td> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</tr> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</table> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</form> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</div> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<div class="body scrollableList" id="${args.htmlid}-body"> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<table> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<#list entries as e> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<tr> <td> <b> ${e.name} </b> </td> </tr> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<tr> <td> ${e.desc} </td> </tr> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
<tr> <td> &nbsp; </td> </tr> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</#list> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</table> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</div> </span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">
</div></span></span></i></div>
</blockquote>
<div style="color: #666666; font-family: inherit;">
<i><span dir="ltr" style="font-size: 10pt;">
</span></i></div>
<div style="color: #666666; font-family: inherit;">
<br />
The template reads some properties from the following properties file (or message bundle):</div>
<div style="color: #666666; font-family: inherit;">
<br />
<div style="text-align: center;">
<b><span style="font-size: x-small;"><span dir="ltr"><span style="font-size: small;"> </span></span></span></b><span style="font-size: x-small;"><b>.../site-webscripts/de/ecmgeek/components/dashlets/</b><b><span dir="ltr">pinboardlist.get.properties</span></b></span></div>
<blockquote class="tr_bq">
<i><span style="font-size: x-small;"><span dir="ltr">title=Pinboard</span></span></i></blockquote>
</div>
<blockquote style="color: #666666; font-family: inherit;">
<div>
<i><span style="font-size: x-small;"><span dir="ltr">subject=Subject</span></span></i></div>
<div>
<i><span style="font-size: x-small;"><span dir="ltr">desc=Description</span></span></i></div>
</blockquote>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
Even if this is not the most complicated dashlet, I hope that it may help you to get started with dashlet development. Finally the dashlet looks this way:</div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div class="separator" style="clear: both; color: #666666; font-family: inherit; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRQtWCBaQaL7idcK9yjOvK9fM4K2aJSSVOzELbP7O7QSEoJBgJvjgJqfC0Sgt7xHmbNAkf1VzYXN9MGVh8JeXz-VDAsDldG0uYY4VIhJqFTE8nrq7wW3AZk3pgvcgbuinu5VK4nWEeZyfH/s1600/pinboard-dashlet.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRQtWCBaQaL7idcK9yjOvK9fM4K2aJSSVOzELbP7O7QSEoJBgJvjgJqfC0Sgt7xHmbNAkf1VzYXN9MGVh8JeXz-VDAsDldG0uYY4VIhJqFTE8nrq7wW3AZk3pgvcgbuinu5VK4nWEeZyfH/s640/pinboard-dashlet.png" width="640" /></a></div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
<i><span style="font-size: x-small;"><span dir="ltr">
</span></span></i></div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
<br /></div>
<div style="color: #666666; font-family: inherit;">
</div>
<div style="color: #666666; font-family: inherit;">
<span style="font-size: x-small;"><span dir="ltr"></span></span></div>
<div style="color: #666666; font-family: inherit;">
<span style="font-size: x-small;"><span dir="ltr"><br /></span></span></div>
<div style="color: #666666; font-family: inherit;">
<span style="font-size: x-small;"><span dir="ltr"><span style="font-size: small;"> </span></span></span><i><span style="font-size: x-small;"><span dir="ltr"> </span></span></i></div>David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com1tag:blogger.com,1999:blog-7954468691908846961.post-61841807242485163642012-06-12T12:06:00.001-07:002012-06-12T12:06:16.968-07:00Theme itToday I had to investigate how to add a custom theme to my Alfresco 4.x installation. Some parts were a bit tricky, but the most of it was quite simple. Here some useful steps:<br />
<br />
<ol>
<li>Navigate to $WEBAPPS/share/WEB-INF/classes/alfresco/site-data/themes . BTW: $WEBAPPS is the deployment folder of your servlet container.</li>
<li>Copy the file yellowTheme.xml to myTheme.xml</li>
<li>Edit the file myTheme.xml by setting the title and the id. The id has to be 'theme.myTheme'</li>
<li>Navigate to $WEBAPPS/themes!</li>
<li>Make a copy of the complete folder 'yellowTheme' by naming it to 'myTheme'.</li>
<li>Naviagate to $WEBAPPS/themes/myTheme/images!</li>
<li>Open all the images by using E.G. the G(nu) I(mage) M(anipulation) P(rogram) . The Command is 'gimp'. Then colorize the images to fit your required base color. I just colorized every image which had a yellow color before. The main loge image is named 'app_logo.png' and can be replaced by your prefered one.</li>
<li>Navigate back to $WEBAPPS/themes/myTheme!</li>
<li>Edit the file presentation.css by setting the required colors. Again, I just copied the color codes to GIMP by only replacing the yellow color tones with my prefered ones.</li>
<li>Now the tricky part. There are some css dependencies those need to be changed inside this file. So just replace every occurrence of 'yellowTheme' with 'myTheme' inside this file.</li>
<li>Naviagete to $WEBAPPS/themes/myTheme/yui/assets</li>
<li>Inside the file 'skin.css', also replace every occurrence of 'yellowTheme' with 'myTheme'.</li>
<li>Restart Alfresco</li>
<li>Open Alfresco Share, create a new site and choose the entry 'myTheme' as the site theme.</li>
<li>Perform some CSS changes by being able to test your changes immediately by refreshing the just created site.</li>
<li>Open the Administration Console and set the theme 'myTheme' as the gloabl one.</li>
</ol>
I hope this article helps you to get quickly started with customizing your Alfresco theme.David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com0tag:blogger.com,1999:blog-7954468691908846961.post-17343921131242671782012-04-27T06:36:00.003-07:002012-04-27T06:36:38.168-07:00Alfresco cloud serviceAlfresco started a cloud service. More detailed it is is an instance of Alfresco Share which is avaiable in the WWW. The smallest offering is for FREE and it allows you to use Share functions like:<br />
<ul>
<li>The document library</li>
<li>The dashboard</li>
<li>Collaborate on documents</li>
<li>Manage site members</li>
</ul>
Further features and space is available for monthly fees. However, if you want to try it out then it is possible to register here: http://cloud.alfresco.com .<br />
<br />
I just created an instance for magicable.de and created two user accounts. However both have to log-in to be able to see the content. So this service is not suitable for sharing your content accross the web. It's more for companies or cloesed communities those need to access and collaborate on their documents inside the web. So there seems to be no guest access to your Share instance in the cloud.<br />
<br />
Unfortunately the free instance does not allow to access it via an API. So you can't use it as content repo in the web. As far as I understand this functionality will be available later for the paid version of it.<br />
<br />
However, if you want to store some documents online (including meta data - this is something which can't drop box do for you), then Alfresco in the Cloud may be an alternative for you. <br />
David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com0tag:blogger.com,1999:blog-7954468691908846961.post-453962233191129922012-04-27T05:51:00.001-07:002012-04-27T06:01:02.466-07:00Are we brain-washed?In fact I am coming from the database world. This means I worked as an Engineer for the vendor of an relational database and also did Consulting for a No-SQL company. In both cases I had contact with ECM and related systems. So as I worked for Ingres I did Partner Certification work for systems like Alfresco and Liferay. In the past the system borders of an ECM system were very clear to me. So everything beyond the storage of just Meta Data was out of the scope of the Database System itself. I became a 'border liner' during my time as a Senior Consultant for a Graph Database System. The vertices could store not just meta data but also provide you a Content Stream. The system aimed to support unstructured data very well (as mentioned it supported Content streams and also something that was named Undefined Attribute). There were even Document Management use cases those were covered by this system. However ... . During my work with ECM, I realized that ECM companies understand themself more and more as Data Management companies. (Another point seems to be that today everything has to be Social or in the Cloud.) We tend to see everything as document. By definition a document is a set of properties thoses are used to store the meta data and the content itself. This raises questions like:<br />
<ul>
<li>Is a document without content really a document?</li>
<li>Is really everything which has meta data and content a document?</li>
</ul>
I am sure the answer is 'It depends', but I think we should go back to the roots by not using ECM-Systems like Databases. We should ask questions like:<br />
<ul>
<li>Is there a real paper document involved in a given use case?</li>
<li>Are there some real workflows with real persons those are handling real documents?</li>
<li>What should the person know about the document? </li>
</ul>
If the answer is 'Yes', then we can be sure that we are doing right by storing a digital document which has the right set of properties regarding the given processes and requirements.<br />
<br />
But what's if the answer is 'No'. In my opinion we should then not use an ECM/DM system to store such data, even if we want to do it because it seems to be close because there is already one available. Just use a Database System (NoSQL or Relational, whatever the use cases are requiring) to store the data regarding the required data model. Be not brain-wahsed! Do not belive that ECM solves all your Data Management problems and the answers to the above questions will be often (but not every time):<br />
<ul>
<li>A document without content should be an object in a datbase (row, vertex, ...).</li>
<li>Not everything which has meta data and content is really a document!</li>
</ul>
What do you think about? <br />
<br />
<br />David Maierhttp://www.blogger.com/profile/13397846517622289056noreply@blogger.com1