Create a new kind of site Alfresco 5.2 - alfresco

I'm trying to create a new type of site. When I'm creating a new one, only appears 1 type in the select: "Collaboration Site". I wish to add more options. For example "Custom Site", and for that site having predefined pages and dashboard. I've got a solution for this but it's modifying presets.xml and share-header.get.js files. I want to do the same by adding my own files, not editing existent files.
Thanks in advance.

You are correct to want to avoid touching out-of-the-box files that came with your Alfresco distribution. You can add new site presets through the standard extension mechanisms.
For example, you should be able to put a presets.xml file in web-extension/site-data/presets that describes your presets. It sounds like you already have an example of what that should look like.
Then, under web-extension/site-webscripts/org/alfresco/modules you can add create-site.get.js which has something like:
var sitePresets = [
{id: "site-dashboard", name: msg.get("title.collaborationSite")},
{id: "some-new-preset", name: msg.get("title.somePreset")}
];
model.sitePresets = sitePresets;
Note that this has changed slightly depending on which version of Alfresco you are using. For example, in 5.2, I don't believe you need to override create-site.get.js as shown above. Instead, you can use a Share extension module. Create a file called presets.xml in web-extension/site-data/extensions:
<extensions>
<modules>
<module>
<id>Additional Site Presets</id>
<version>1.0</version>
<auto-deploy>true</auto-deploy>
<evaluator type="default.extensibility.evaluator"/>
<customizations>
<customization>
<targetPackageRoot>org.alfresco</targetPackageRoot>
<sourcePackageRoot>com.someco.presets</sourcePackageRoot>
</customization>
<customization>
<targetPackageRoot>org.alfresco.share.pages</targetPackageRoot>
<sourcePackageRoot>com.someco.presets</sourcePackageRoot>
<alwaysApply>
<webscript>share-header</webscript>
</alwaysApply>
</customization>
</customizations>
</module>
</modules>
</extension>
With that extension in place you also have to override share-header.get.js. To do that, create a file with that name under web-extension/site-webscripts/com/someco/presets/share/header with this content:
var siteService = widgetUtils.findObject(model.jsonModel, "id", "SITE_SERVICE");
if (siteService && siteService.config)
{
siteService.config.additionalSitePresets = [
{ value: "some-site-preset", label: msg.get("title.someSite") }
];
}
This should add the new "some-site-preset" to the list you see when you create a new site in 5.2.

Related

NuxtServerInit: Add Google-Tag-Manager scripts to head an body

I use one nuxt instance to serve several domains with different languages. For each domain I use a different Google-Tag-Manager account.
Within nuxtServerInit I add to the store the hostname and also the Google-Tag-Manager ID.
Now I am looking for a way to add the Javascript snippets to my nuxt project.
This one needs to be in the head
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXX);</script>
<!-- End Google Tag Manager -->
And that one at the beginning of the body
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
My first idea is it to add this code programmatically to the document, but I don't know how.
Any suggestions or better idea to accomplish this?
I already tried to use the community solution. But it does not support different ID's.
Can anyone help implementing Nuxt.js Google Tag Manager with function based id
The main problem of this solution is the module which is used itself. A module is only called once but it needed to be something else to be called on each request.
This question is similar and helped me find the answer to this one.
Create a new plugin at plugins/gtm.js (or whatever you want to name it):
// plugins/gtm.js
let gtmKey;
// In this example I care about the page title but you can use other properties if you'd like
switch(document.title) {
case 'Title 1':
gtmKey = 'GTM-XXXXXX1';
break;
case 'Title 2':
gtmKey = 'GTM-XXXXXX2';
break;
default:
break;
}
export default () => {
if (!gtmKey) { // In case I have other pages not in the switch statement above
return;
}
/*
** Include Google Tag Manager
*/
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', gtmKey);
}
Then load it in from nuxt.config.js:
// nuxt.config.js
export default {
...
plugins: [{ src: '~/plugins/gtm.js', mode: 'client' }],
...
}
Note 1: I don't really like how I've hardcoded the titles into this plugin since an update of the title on one of my pages could break this without me knowing. Suggestions here are welcome.
Note 2: My eslint was complaining about no semicolon before the core GTM closure (just before the (function...) so I actually just disabled eslint for this whole file with // eslint-disable. You could just disable it for the line.

tinyMCE4 can't get external templates to work

I'm very new to tinyMCE (and to JavaScript), so I'm sorry if the answer to my question is obvious. (I'm also working on code and files that another developer created and that I'm not overly familiar with.)
I need to use an external template file for tinyMCE4, and I can't get it to work. I've looked at the tinyMCE4 documentation, but I don't understand where I'm going wrong.
The tinyMCE init is in an index.cfm file, and the list of templates is in a separate file, template_list.js.
Contents of template_list.js:
var tinyMCETemplateList = [
["Name", "templates/file1.cfm", "Name."],
["Name2", "templates/file2.cfm", "Name2."],
...
];
In index.cfm, I've included "template" in the plugins line.
To pull in the templates to appear as a list in a drop-down so the user can choose a template, I've tried:
template_external_list_url: "tinymce/js/tinymce/template_list.js"
With this, when I run the program and click the Insert Template button I get a "No templates defined" error.
I've also tried:
templates : [{url:"tinymce/js/tinymce/template_list.js"}]
With this, the Insert Template dialog box appears, but the drop-down is empty, and the raw code from template_list.js appears in the text area under the drop-down. I get the same result if I change the code in template_list.js to:
[
{title: "Name", url: "templates/file1.cfm", description: "Name."},
{title: "Name2", url: "templates/file2.cfm", description: "Name2."},
...
]
...and also if I add quotations around "title", "url", and "description".
Again, sorry if the answer is obvious, but as a beginner I appreciate any help.
Per the documentation the TinyMCE configuration object expects you to pass an array containing one object for each template. At a high level it would look like this:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "template",
menubar: "insert",
toolbar: "template",
templates: [
{title: 'Item 1', description: 'Desc 1', content: 'My content'},
{title: 'Item 2', description: 'Desc 2', url: 'development.html'}
]
});
You will note that the templates configuration option is passed an array of objects - this is what TinyMCE expects so no matter what you have to return an array of objects.
You can insert the template HTML directly (as shown in the first example above) or you can point to a URL that the browser can fetch when TinyMCE is initialized (as shown in the second example above). There is no template_external_list_url configuration option so that is not working because its not valid.
If you want to externalize the templates outside the TinyMCE configuration you can place the data in a file and reference that via a URL. For example:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "template",
menubar: "insert",
toolbar: "template",
templates: "/path/to/the/file/templates.php"
});
The URL referenced there must return an array of objects as that is ultimately what TinyMCE is expecting. Your example above seems to imply your external file is returning a JavaScript variable named tinyMCETemplateList - but that means nothing to TinyMCE so while the file may be loaded what is "returned" is not an array of JavaScript objects.
I would suggest you start by getting things to work without externalizing the templates (just make sure you get the basics working). Then externalize the content to a separate file and make sure that the file returns an array of objects. I would note that your example using tinyMCETemplateList seems to return an array of arrays which is not what TinyMCE is expecting.
I found this really frustrating and fiddly to get working at all. Eventually what I'm doing is calling a function in another js file that returns an array that I give to the templates parameter.
function GetTemplateArray()
{
return new Array(
{
title: "2 Columns",
url: "templates/template1.html",
description: "Adds a 2 column table"
},
{
title: "3 Columns",
url: "templates/scf/template2.html",
description: "Adds a 3 column table"
}
);
}
Then in the tinymce.init code:
tinymce.init(
{
...
templates: GetTemplateArray(),
...

setting rowsPerPageOptions in alfresco share document library pagination section

I need to enable rowsPerPageOptions in documentLibrary paginator section.I found that paginator is configured in _setupHistoryManagers function in OOTB documentlist.js. so I have created documentlist-custom.js and overwrite entire function[_setupHistoryManagers] that exists in OOB documentlist.js and put it in my custom js file.it working fine.
But I want to know Is it the right way or Is there any way setting the adding this rowsPerPageOptions option in this.widgets.paginator function instead of copying whole _setupHistoryManagers function in custom js file?
using 4.2.2 version.
_setupHistoryManagers
{
// YUI Paginator definition
this.widgets.paginator = new YAHOO.widget.Paginator(
{
containers: [this.id + "-paginator", this.id + "-paginatorBottom"],
rowsPerPage: this.options.pageSize,
initialPage: this.currentPage,
rowsPerPageOptions: [25,50,75,100,500],
template: this.msg("pagination.template"),
pageReportTemplate: this.msg("pagination.template.page-report"),
previousPageLinkLabel: this.msg("pagination.previousPageLinkLabel"),
nextPageLinkLabel: this.msg("pagination.nextPageLinkLabel")
});
}

tinymce how to specify the css file to be used for tinymce in another js file

I have made my own plugin.I am using tinymce with it.Now, to specify the css file for tinymce we use content_css inside tinymce.init, but in my case i dont want to specify the css file path in tinymce file itself but want it to be looked up in my plugin.js file. How can i do that?
Done.Thought of sharing the solution here. In my plugin's js file which i have called plugin.js i have written
tinymce.PluginManager.add('matheditor', function(editor, url) {
function TinyMCEAdapter(){
var pluginPath = '../editor.html',
editOptions = null,
editedElementId = null;
editor.settings.content_css = '../themes/tangerine/css/equationeditor.css';
}}
here the parameter matheditor is the name of my plugin.We set the content_css for tinymce with the line
editor.settings.content_css = '../themes/tangerine/css/equationeditor.css';`
Check out this tutorial: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
You call loadjscssfile function as soon as your plugin is loaded.

How to customize the Document List in Alfresco?

In the repository there be will different document lists.i.e there will be Data dictionary, user homes,Guest homes etc. when I change the view to "detailed view", it displays Favorite, like, comments links. where will I have to modify if I dont want to show them. Can you tell in which file i have to comment the code for not displaying those links. Thank you in Advance.
I wanted a "modular" answer to this question, this answer is to show how I handled this issue.
Context: Alfresco 4.2.f, project Maven from the org.alfresco.maven.archetype:alfresco-amp-archetype:1.1.1 archetype, I put everything in the embedded JAR when possible.
Create a module extension for share (see this blog for more details). Here is my extension file:
src/main/resources/alfresco/site-data/extensions/my-custom-extension.xml
<extension>
<modules>
<module>
<id>Main module of my custom extension</id>
<version>${project.version}</version>
<auto-deploy>true</auto-deploy>
<customizations>
<customization>
<!-- Order matters here! target before source, always! -->
<targetPackageRoot>org.alfresco</targetPackageRoot>
<sourcePackageRoot>my-custom.main</sourcePackageRoot>
</customization>
</customizations>
</module>
</modules>
</extension>
In the documentlibrary component of your module package, create this FTL in order to declare a javascript:
src/main/resources/alfresco/site-webscripts/my-custom/main/components/documentlibrary/documentlist-v2.get.html.ftl
<#-- Add a Javascript declaration -->
<#markup id="my-custom-js" target="js" action="after">
<#script type="text/javascript" group="documentlibrary"
src="${url.context}/res/my-custom/main/components/documentlibrary/documentlist.js"/>
</#>
In the resources (META-INF), under documentlibrary component, create the Javascript:
src/main/resources/META-INF/my-custom/main/components/documentlibrary/documentlist.js
YAHOO.lang.augmentObject(Alfresco.DocumentList.prototype, {
// Possible values: i18nLabel, lockBanner, syncFailed, syncTransientError
// date, size, name, version, description, tags, categories
myCustomDisabledRenderers: ["description", "version", "tags"],
// Possible values: favourites, likes, comments, quickShare
myCustomDisabledSocials: ["favourites", "comments", "likes", "quickShare"],
myCustomIsSocialDisabled: function(propertyName) {
return Alfresco.util.arrayContains(
this.myCustomDisabledSocials, propertyName);
},
myCustomIsRendererDisabled: function(propertyName) {
if (Alfresco.util.arrayContains(
this.myCustomDisabledRenderers, propertyName)) {
return true;
}
// Disable the social renderer when all the social features are
// disabled
if (propertyName === "social" && this.myCustomDisabledSocials.length == 4) {
return true;
}
return false;
},
/** Helper function to disable socials
* propertyName must be one of "favourites", "comments", "likes", "quickShare"
*/
myCustomDisableSocial: function(propertyName) {
if (!Alfresco.util.arrayContains(
this.myCustomDisabledSocials, propertyName)) {
this.myCustomDisabledSocials.push(propertyName);
}
},
// Custom registerRenderer for social features, originally defined in:
// webapps/share/components/documentlibrary/documentlist.js:2134
myCustomSocialRegisterRenderer: function(record) {
var jsNode = record.jsNode;
var html = "";
// Current usage of the separator variable allow to change the order
// of the different social features (the 'if' blocks below) without
// changing their content
var separator = "";
/* Favourite / Likes / Comments */
if (!this.myCustomIsSocialDisabled("favourites")) {
html += '<span class="item item-social' + separator + '">' +
Alfresco.DocumentList.generateFavourite(this, record) +
'</span>';
separator = " item-separator";
}
if (!this.myCustomIsSocialDisabled("likes")) {
html += '<span class="item item-social' + separator + '">' +
Alfresco.DocumentList.generateLikes(this, record) +
'</span>';
separator = " item-separator";
}
if (!this.myCustomIsSocialDisabled("comments") &&
jsNode.permissions.user.CreateChildren) {
html += '<span class="item item-social' + separator + '">' +
Alfresco.DocumentList.generateComments(this, record) +
'</span>';
separator = " item-separator";
}
if (!this.myCustomIsSocialDisabled("quickShare") && !record.node.isContainer &&
Alfresco.constants.QUICKSHARE_URL) {
html += '<span class="item' + separator + '">' +
Alfresco.DocumentList.generateQuickShare(this, record) +
'</span>';
separator = " item-separator";
}
return html;
},
// Overwrite registerRenderer which was originally defined in:
// webapps/share/components/documentlibrary/documentlist.js:1789
registerRenderer: function DL_registerRenderer(propertyName, renderer) {
if (Alfresco.util.isValueSet(propertyName) &&
Alfresco.util.isValueSet(renderer) &&
!this.myCustomIsRendererDisabled(propertyName)) {
if (propertyName === "social") {
this.renderers[propertyName] = this.myCustomSocialRegisterRenderer;
} else {
this.renderers[propertyName] = renderer;
}
return true;
}
return false;
}
}, true);
Then you can disable the links by updating myCustomDisabledRenderers and/or mySocialDisabledRenderers.
This way also allows you to create a module that disable (for example) the "comments on documents" or "likes on document" feature independently in only 6 easy steps!
Example, how to make a module that only disable comments on documents in 6 steps
Important: first remove the "comment disabling" from the documentlist.js of the main module.
myCustomDisabledSocials: ["favourites", "likes", "quickShare"],
Create a new module "my-custom.nocomment" with the same structure.
<extension>
<modules>
<module>
<id>Main module of my custom extension</id>
[...]
</module>
<module>
<id>No comment module of my custom extension</id>
<version>${project.version}</version>
<customizations>
<customization>
<targetPackageRoot>org.alfresco</targetPackageRoot>
<sourcePackageRoot>my-custom.nocomment</sourcePackageRoot>
</customization>
</customizations>
</module>
</modules>
</extension>
Add the FTL...
src/main/resources/alfresco/site-webscripts/my-custom/nocomment/components/documentlibrary/documentlist-v2.get.html.ftl
<#-- Add a Javascript declaration -->
<#markup id="my-custom-js" target="js" action="after">
<#script type="text/javascript" group="documentlibrary"
src="${url.context}/res/my-custom/nocomment/components/documentlibrary/documentlist.js"/>
</#>
then the Javascript...
src/main/resources/META-INF/my-custom/nocomment/components/documentlibrary/documentlist.js
Alfresco.DocumentList.prototype.myCustomDisableSocial("comment");
and then I'm happy, clap along if you feel like everything's just got smooth!
Notes:
The nocomment module depends on the main module.
It is important for the nocomment module to be loaded after the main module (in http://localhost:8080/share/page/modules/deploy).
In order for the nocomment module to be complete, you also need to disable comments from the document details page, see below.
Disable comments from the document details page
Even if, this one is documented elsewhere, I spent so much time searching around these few days that I feel like I need to be as comprehensive as possible.
src/main/resources/alfresco/site-data/extensions/my-custom-extension.xml
Add this to your my-custom.nocomment module declaration and you will get rid of the comments form and list from the document details page.
[...]
<module>
<id>No comment module of my custom extension</id>
[...]
<components>
<component>
<region-id>comments</region-id>
<source-id>document-details</source-id>
<scope>template</scope>
<sub-components>
<sub-component id="default">
<evaluations>
<evaluation id="guaranteedToHide">
<render>false</render>
</evaluation>
</evaluations>
</sub-component>
</sub-components>
</component>
</components>
</module>
[...]
src/main/resources/alfresco/site-webscripts/my-custom/nocomment/components/node-details/node-header.get.js
This is for disabling the button on the header of the document details page.
// Disable comments
for (var i = 0; i < model.widgets.length; i++) {
if (model.widgets[i].id == "NodeHeader") {
model.widgets[i].options.showComments = false;
}
}
// And since it does not work, disable comments this way too
model.showComments = "false";
Note: I did not test these snippets, they have been taken from my project after "anonymization" (basically renaming the module). Let me know if you find mistakes.
What you are looking for is more than likely generated by client-side JavaScript. You should use share-config-custom.xml to set Share to development mode, like this:
<alfresco-config>
<!-- Put Share Client in debug mode -->
<config replace="true">
<flags>
<client-debug>true</client-debug>
<client-debug-autologging>false</client-debug-autologging>
</flags>
</config>
</alfresco-config>
Then, use firebug or your browser's developer console to step through the client-side JavaScript. You should be able to find the point where the document library elements are rendered.
You can override Alfresco's client-side JavaScript components with your own components. Please put them in your own namespace to avoid collisions with Alfresco's.
I did it by commenting the {social} line in file share-documentlibrary-config.xml in share/src/alfresco/share-document-config
...
<metadata-templates>
<!-- Default (fallback) -->
<template id="default">
<line index="10" id="date">{date}{size}</line>
<line index="20" id="description" view="detailed">{description}</line>
<line index="30" id="tags" view="detailed">{tags}</line>
<line index="40" id="categories" view="detailed" evaluator="evaluator.doclib.metadata.hasCategories">{categories}</line> -->
<!-- <line index="50" id="social" view="detailed">{social}</line> -->
</template>
...
It works!
I'm not sure if I understand well your question - you're trying to hide some columns from particular view in alfresco explorer? If so, you need to edit /jsp/browse/browse.jsp file, but I think that's not a good idea. Maybe implementing your own NodePropertyResolver should be better way, have look at my older blogpost on this topic: http://www.shmoula.cz/adding-columns-to-custom-browse-jsp/
It looks like all of it is in: \opt\alfresco-4.0.d\tomcat\webapps\share\components\documentlibrary\documentlist.js
I think the trick is in this.registerRenderer("social"...) to return html before line 1981 (after favorites before likes) supposing you want to keep at least faorite

Resources