My talk for Alfresco DevCon 2018. Source code available at https://github.com/keensoft/alfresco-remove-version

1. How to extend (properly)
and "old" Alfresco Share
feature
Angel Borroy
@AngelBorroy angelborroy keensoft

2. Learn. Connect. Collaborate.
Once upon a time…
… a user created hundred of versions.
An engineer who was passing by, wondered how to help
111.0
CERTIFIED TECHNOLOGY

3. Learn. Connect. Collaborate.
He had an idea
“Add a simple button to remove versions from
Alfresco Share”
CERTIFIED TECHNOLOGY

4. Learn. Connect. Collaborate.
That engineer was a real hero, almost LEGENDARY!
20 years of experience
#4 in Community Leaderboard
7 Alfresco Hack-a-thons
5 Alfresco conferences
4 YouTube Tech Talk Live
2 YouTube Office hours
1 Community-driven Video

5. Learn. Connect. Collaborate.
Trust me: a 15 minutes task
• 1 XML Surf Extension for document-details component
• 1 FTL page to add the icon and the link
• 1 JS file to invoke REST API using Ajax helper
Hands on!
$ mvn archetype:generate -Dfilter=org.alfresco:
5: remote -> org.alfresco.maven.archetype:alfresco-share-jar-archetype

6. Learn. Connect. Collaborate.
Guide my sword
document-versions.get.html.ftl > > > document-versions.js
getDocumentVersionMarkup: function DocumentVersions_getDocumentVersionMarkup(doc) {
var html = '';
html += '<div class="version-panel-left">'
html += ' <span class="document-version">' + $html(doc.label) + '</span>';
html += '</div>';
html += '<div class="version-panel-right">';
html += ' <a href="' + downloadURL + '" target="_blank" class="download"
title="' + this.msg("label.download") + '">&nbsp;</a>';
...
* Extracted from the book “Creative ways to build an HTML”

7. Learn. Connect. Collaborate.
Crossing the red line
Overwriting getDocumentVersionMarkup method...
// Add new icon to remove a version passing "label" parameter to
// "onRemoveClick" function
html += ' <a href="#" target="_blank" name=".onRemoveClick" rel="' +
doc.label + '" class="' + this.id + ' remove" title="' +
this.msg("label.delete") + '">&nbsp;</a>';
JavaScript
CSS
i18n

8. Learn. Connect. Collaborate.
Routine tasks
CSS
/* Add icon for the new button */
.document-versions .actions a.remove{
background-image: url(images/document-delete-16.png);}
/* Add more space to include a new button */
.document-versions .actions {
width: 7em !important;}
i18n
label.delete=Delete
CSS
i18n

9. Learn. Connect. Collaborate.
Finding the right REST API method...

10. Learn. Connect. Collaborate.
… JavaScript API method …

11. Learn. Connect. Collaborate.
… Java method!

12. Learn. Connect. Collaborate.
Joyful Web Script!
[HTTP DELETE] http://alfresco/api/version/{noderef}/{label}
Hands on!
$ mvn archetype:generate -Dfilter=org.alfresco:
4: remote -> org.alfresco.maven.archetype:alfresco-platform-jar-archetype
Alfresco
Web Script

13. Learn. Connect. Collaborate.
Trust me (again): a 15 minutes task
Desc
<url>/api/node/version/{store_type}/{store_id}/{id}/{label}</url>
Response
{"success":"${success}"}
Spring bean
<bean id="webscript.es.keensoft.remove-version.post"
class="es.keensoft.webscript.RemoveVersion” parent="webscript">
<property name="serviceRegistry" ref="ServiceRegistry" />
</bean>
Java code
protected Map<String, Object> executeImpl(WebScriptRequest req, Status status, Cache cache) {
// Reading parameters from URL
Map<String, String> templateArgs = req.getServiceMatch().getTemplateVars();

14. Learn. Connect. Collaborate.
I told you: he was a legend

15. Learn. Connect. Collaborate.
A Spoonful of Sugar Helps the Medicine Go Down
Alfresco.util.Ajax.request(
{
method: Alfresco.util.Ajax.DELETE,
url: Alfresco.constants.PROXY_URI + 'api/node/version/' +
nodeRef.replace(":/", "") + '/' + label,
requestContentType: Alfresco.util.Ajax.JSON,
successCallback: {…},
failureCallback: {…}
});
http://alfresco/api/version/b4822b85-4b33-42ad-8dfa-d630a7a81716/1.0
org.alfresco.web.scripts.WebScriptException - Web Script format '0' is not registered.

16. Learn. Connect. Collaborate.
Into the wild - do not try at home
Moving from DELETE to POST
Desc, Response, Spring bean
*.delete.* > *.post.*
Java code
JSONObject json =
new JSONObject(new JSONTokener(req.getContent().getContent()));
versionLabel = json.getString("label");

17. Learn. Connect. Collaborate.
Stranger things
Alfresco.util.Ajax.request(
{
// Using POST instead of DELETE due to parameters including "."
// (e.g label = 1.0)
method: Alfresco.util.Ajax.POST,
url: Alfresco.constants.PROXY_URI + 'api/node/version/' +
nodeRef.replace(":/", ""),
dataObj: { label: label },
requestContentType: Alfresco.util.Ajax.JSON,
successCallback: { … },
failureCallback: { … }
});

18. Learn. Connect. Collaborate.
Trust me: a 1,5 hours task
• 1 XML Surf Extension for document-details component
• 1 FTL page to add CSS and JavaScript
• 1 JS file to add HTML source code and to invoke REST API using Ajax
helper
• 1 CSS file to stylish the button
• 1 image file for the icon
• 2 i18n property files for English & Spanish
• 1 XML Spring bean for Java-backed Web Script
• 1 XML description file for Web Script declaration
• 1 JSON file for Web Script response
• 1 Java file for Web Script logic
REPOSHARE

19. Learn. Connect. Collaborate.
One more thing…
… everyone should be able to mess up with that killer version action?

20. Learn. Connect. Collaborate.
With great powers comes great responsibility
<!-- Feature only available for members of group VERSION_REMOVERS -->
<evaluator type="group.module.evaluator">
<params>
<groups>GROUP_VERSION_REMOVERS</groups>
<groupRelation>AND</groupRelation>
</params>
</evaluator>

21. Learn. Connect. Collaborate.
How to extend and "old" Alfresco Share feature
• Personal skills
– Patience
– Perseverance
• Resources
– Source Code
– Alfresco Documentation
– Community
– IRC
– Order of the Bee
Source available at https://github.com/keensoft/alfresco-remove-version
Alfresco
Web Script
CERTIFIED TECHNOLOGY

22. ¡Gracias!
@AngelBorroy angelborroy keensoft
How to extend (properly)
and "old" Alfresco Share
feature