3.4.2.1.1. Dialogs

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

Dialogs are Groovy templates that generate forms by mixing static HTML fragments and Groovy calls to the components responsible for building the UI at runtime. The result is a simple but powerful syntax.

Common parameters

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

These following parameters are common and can be used for all input fields.

Parameter Type Required Example Description
jcrPath string
jcrPath=/node/exo:title The relative path inside the current node.
mixintype string with the commas (,) character.

mixintype=mix:i18n

mixintype=mix:votable,mix:commentable,mix:i18n

The list of mixin types you want to initialize when creating the content.
validate string with the comma (,) character

validate=empty

validate=empty,name

validate=org.exoplatform.webui.form.validator.StringLengthValidator

The list of validators you want to apply to the input. Possible values are: name, email, number, empty, null, datetime, length OR validator classes. To know how to pass parameters to validators, refer here
editable string
editable=if-null The input will be editable only if the value of this parameter is if-null and the value of this input is null or blank.
multiValues boolean
multiValues=true Shows a multi-valued component if true and must be used only with corresponding multi-valued properties. The default value of this parameter is false.
visible boolean
visible=true The input is visible if this value is true.
options String separated by the commas (,) character.
"options=toolbar:CompleteWCM,height:'410px',noSanitization" A list of parameters which are input while the content templates are initialized.

Pass parameters to validators

  • "name" validator:

String[] webContentFieldTitle = ["jcrPath=/node/exo:title", "validate=name", "editable=if-null"];


uicomponent.addTextField("title", webContentFieldTitle) ;

  • "email" validator:

String[] webContentFieldTitle = ["jcrPath=/node/exo:title", "validate=email", "editable=if-null"];


uicomponent.addTextField("title", webContentFieldTitle) ;

  • "number" validator:

String[] webContentFieldTitle = ["jcrPath=/node/exo:title", "validate=number", "editable=if-null"];


uicomponent.addTextField("title", webContentFieldTitle) ;

  • "empty" validator:

String[] webContentFieldTitle = ["jcrPath=/node/exo:title", "validate=empty", "editable=if-null"];


uicomponent.addTextField("title", webContentFieldTitle) ;

  • "null" validator:

String[] webContentFieldTitle = ["jcrPath=/node/exo:title", "validate=null", "editable=if-null"];


uicomponent.addTextField("title", webContentFieldTitle) ;

  • "datetime" validator:

String[] webContentFieldTitle = ["jcrPath=/node/exo:title", "validate=datetime", "editable=if-null"];


uicomponent.addTextField("title", webContentFieldTitle) ;

  • "length" validator:

For a maximum length of 50 characters:

String[] webContentFieldTitle = ["jcrPath=/node/exo:title", "validate=empty,length(50;int)", "editable=if-null"];


uicomponent.addTextField("title", webContentFieldTitle) ;

For a minimum length of 6 characters and maximum length of 50 characters:

String[] webContentFieldTitle = ["jcrPath=/node/exo:title", "validate=empty,length(6;50;int)", "editable=if-null"];


uicomponent.addTextField("title", webContentFieldTitle) ;

Note

The mixintype can be used only in the root node field (commonly known as the name field).

Text Field

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

<%

    String[] fieldTitle = ["jcrPath=/node/exo:title", "validate=empty"] ;

    uicomponent.addTextField("title", fieldTitle) ;

    %>
Hidden Field

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

  • Additional parameters

See also: Common parameters

  • Example 

String[] hiddenField5 = ["jcrPath=/node/jcr:content/dc:date", "visible=false"];

    uicomponent.addCalendarField("hiddenInput5", hiddenField5);
Non-value field

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

You cannot either see the non-value field on the form or input value for them. Its value will be automatically created or defined when you are managing templates.

  • Example 

String[] hiddenField1 = ["jcrPath=/node/jcr:content", "nodetype=nt:resource", "mixintype=dc:elementSet", "visible=false"] ;

uicomponent.addHiddenField("hiddenInput1", hiddenField1) ;
Text Area Field

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

  • Additional parameters

Parameter Type Required Description Example
rows Number
The initial text area's number of rows. The value is 10 by default. rows=20
cols Number
The initial text area's number of cols. The value is 30 by default . cols=50

See also: Common parameters

  • Example 

<%

String[] fieldDescription = ["jcrPath=/node/exo:description", "validate=empty"] ;

uicomponent.addTextAreaField("description", fieldDescription) ;

%>
Rich Text Field

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

  • Additional parameters

Parameter Type Required Description Example
options string with the semicolon (;) character
Some options for CKEditor field: toolbar, width and height. options=CompleteWCM;width:'100%';height:'200px';
toolbar string
The predefined toolbar for CKEditor. The value can be: Default, Basic, CompleteWCM, BasicWCM, SuperBasicWCM. options=CompleteWCM
width string
The width of CKEditor. Its value can be the percent of pixel. options=width:'100%'
height string
The height of CKEditor. Its value can be the percent of pixel. options=height:'200px'

See also: Common parameters

  • Example 

<%

String[] fieldSummary = ["jcrPath=/node/exo:summary", "options=toolbar:CompleteWCM,width:'100%',height:'200px'", "validate=empty"] ;

uicomponent.addRichtextField("summary", fieldSummary) ;

%>

Creating a custom RichText editor fields

In the WYSIWYG widget section, you already know about a set of default toolbars (CompleteWCM, Default, BasicWCM, Basic, SuperBasicWCM). In this section, you will learn how to create a RichText editor with custom buttons.

Just edit the configuration file and modify or add new items to the configuration file of the RichText editor is located in: webapps/eXoWCMResources/eXoConfig.js

Take a look at the eXoConfig.js file to see a definition of a custom toolbar named "MyCustomToolbar":

config.toolbar_MyCustomToolbar = [

  ['Source','Templates','-','FitWindow','ShowBlocks'],

 ['Cut','Copy','PasteText','-','SpellCheck','-','Undo','Redo'],

 ['WCMInsertGadget','Flash','Table','SpecialChar', 'WCMInsertContent'],

 '/',

 ['Bold','Italic','Underline','StrikeThrough','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','OrderedList','UnorderedList','-','TextColor','BGColor','-','RemoveFormat'],

 ['Link','WCMInsertPortalLink','Unlink','Anchor'],

 '/',

 ['Style','FontFormat','FontName','FontSize']

] ;

Every toolbar set is composed of a series of "toolbar bands" that are grouped in the final toolbar layout. The bands items move together on new rows when resizing the editor.

Every toolbar band is defined as a separated JavaScript array of strings. Each string corresponds to an available toolbar item defined in the editor code or in a plugin.

  • Put the desired button names in square bracket ("[" & "]") and separate them by commas to create a toolbar band. You can look at the above code to know all the possible toolbar item. If the toolbar item does not exist, a message will be displayed when loading the editor.

  • Include a separator in the toolbar band by putting the "-" string on it.

  • Separate each toolbar brands with commas.

  • Use slash ("/") to tell the editor that you want to force the next bands to be rendered in a new row and not following the previous one.

Note

The last toolbar band must have no comma after it.

Calendar Field

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

  • Additional parameters

Parameter Type Required Description Example
options string
An option for the calendar field: Display time. options=displaytime

  • Example 

<%

String[] fieldPublishedDate = ["jcrPath=/node/exo:publishedDate", "options=displaytime", "validate=datetime", "visible=true"] ;

uicomponent.addCalendarField("publishedDate", fieldPublishedDate) ;

%>
Upload Field

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

  • Additional parameters

See also: Common parameters

  • Example

When you create an upload form, you can store an image by two main ways:

  • If you want to store the image as a property, use the following code:

<%

String[] fieldMedia = ["jcrPath=/node/exo:image"] ;

uicomponent.addUploadField("media", fieldMedia) ;

%>

  • If you want to store the image as a node, use the following code:

<%

String[] hiddenField1 = ["jcrPath=/node/exo:image", "nodetype=nt:resource", "visible=false"] ;

String[] hiddenField2 = ["jcrPath=/node/exo:image/jcr:encoding", "visible=false", "UTF-8"] ;

String[] hiddenField3 = ["jcrPath=/node/exo:image/jcr:lastModified", "visible=false"] ;

uicomponent.addHiddenField("hiddenInput1", hiddenField1) ;

uicomponent.addHiddenField("hiddenInput2", hiddenField2) ;

uicomponent.addHiddenField("hiddenInput3", hiddenField3) ;


String[] fieldMedia = ["jcrPath=/node/exo:image"] ;

uicomponent.addUploadField("media", fieldMedia) ;

%>

  • But, this code is not complete. If you want to display the upload field, the image must be blank, otherwise you can display the image and an action enables you to remove it. You can do as follows: 

<%

  def image = "image";

  // If you're trying to edit the document

  if(uicomponent.isEditing()) {

  def curNode = uicomponent.getNode();

  // If the image existed

  if (curNode.hasNode("exo:image")) {

      def imageNode = curNode.getNode("exo:image") ;

      // If the image existed and available

      if (imageNode.getProperty("jcr:data").getStream().available() > 0 && (uicomponent.findComponentById(image) == null)) {

          def imgSrc = uicomponent.getImage(curNode, "exo:image");

          def actionLink = uicomponent.event("RemoveData", "/exo:image");

          %>

              <div>

                  <img src="$imgSrc" width="100px" height="80px"/>

                  <a href="$actionLink">

                      <img src="/eXoResources/skin/DefaultSkin/background/Blank.gif" alt="" class="ActionIcon Remove16x16Icon"/>

                  </a>

              </div>

          <%

      } else {

          String[] fieldImage = ["jcrPath=/node/exo:image/jcr:data"] ;

          uicomponent.addUploadField(image, fieldImage) ;

      }

  } else {

          String[] fieldImage = ["jcrPath=/node/exo:image/jcr:data"] ;

          uicomponent.addUploadField(image, fieldImage) ;

  }

  }  else if(uicomponent.dataRemoved()) {

  String[] fieldImage = ["jcrPath=/node/exo:image/jcr:data"] ;

  uicomponent.addUploadField(image, fieldImage) ;

  } else {

  String[] fieldImage = ["jcrPath=/node/exo:image/jcr:data"] ;

  uicomponent.addUploadField(image, fieldImage) ;

  }

%>

  • To have multiple upload fields, you just add the multiValues=true parameter to fieldProperty in dialog1.gtmpl: 

  # Multi upload

  fieldProperty = ["jcrPath=/node/exo:value", "multiValues=true"];

  uicomponent.addUploadField("/node/exo_value", fieldProperty);

Note

In this case, you must be sure that the node type definition of the document you are currently editing should allow the document to have a child node named 'exo:value' whose node type is ' nt:unstructured'. All uploaded files of this upload component are stored in this 'exo:value' child node.

Radio Field

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

  • Additional parameters

Parameter Type Required Description Example
options string with the comma (,) characters
Some radio values. options=radio1,radio2,radio3

See also: Common parameters

  • Example 

<%

String[] fieldDeep = ["jcrPath=/node/exo:isDeep", "defaultValues=true", "options=radio1,radio2,radio3"];

uicomponent.addRadioBoxField("isDeep", fieldDeep);

%>
Select box Field

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

The select box widget enables you to render a select box with static values. These values are enumerated in a comma-separated list in the "options" argument.

Parameter Type Required Description Example
options string with the comma (,) characters
Some option values. options=option1,option2,option3

See also: Common parameters

  • Example 

String[] mimetype = ["jcrPath=/node/jcrcontent/jcr:mimeType", "text/html", "options=text/html,text/plain"] ;

uicomponent.addSelectBoxField("mimetype", mimetype) ;

The argument with no key (here "text/html") is selected by default.

Advanced dynamic select box

In many cases, the previous solution with static options is not good enough and one would like to have the select box checked dynamically. That is what eXo Platform provide thanks to the introduction of a Groovy script as shown in the code fragment below. 

String[] args = ["jcrPath=/node/exodestWorkspace", "script=ecm-explorer/widget/FillSelectBoxWithWorkspaces:groovy", "scriptParams=production"];

uicomponent.addSelectBoxField("destWorkspace", args) ;

The script itself implements the CMS Script interface and the cast is done to get the select box object as shown in the script code which fills the select box with the existing JCR workspaces. 

import java.util.List ;

import java.util.ArrayList ;


import org.exoplatform.services.jcr.RepositoryService;

import org.exoplatform.services.jcr.core.ManageableRepository;


import org.exoplatform.webui.form.UIFormSelectBox;

import org.exoplatform.webui.core.model.SelectItemOption;

import org.exoplatform.services.cms.scripts.CmsScript;


public class FillSelectBoxWithWorkspaces implements CmsScript {


  private RepositoryService repositoryService_;


  public FillSelectBoxWithWorkspaces(RepositoryService repositoryService) {

    repositoryService_ = repositoryService;

  }


  public void execute(Object context) {

    UIFormSelectBox selectBox = (UIFormSelectBox) context;


    ManageableRepository jcrRepository = repositoryService_.getRepository();

    List options = new ArrayList();

    String[] workspaceNames = jcrRepository.getWorkspaceNames();

    for(name in workspaceNames) {

      options.add(new SelectItem(name, name));

    }

    selectBox.setOptions(options);

  }


  public void setParams(String[] params) {

  }

}

Note

It is also possible to provide a parameter to the script by using the argument "scriptParams".

Checkbox Field

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

  • Additional parameters

Parameter Type Required Description Example
options string with the comma (,) characters
Some checkbox values. options=checkbox1,checkbox2,checkbox3

See also: Common parameters

  • Example 

<%

String[] fieldDeep = ["jcrPath=/node/exo:isDeep", "defaultValues=true", "options=checkbox1,checkbox2,checkbox3"];

uicomponent.addCheckBoxField("isDeep", fieldDeep);

%>
Mixin Field

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

  • Additional parameters

See also: Common parameters

  • Example 

<%

String[] fieldId = ["jcrPath=/node", "editable=false", "visible=if-not-null"] ;

uicomponent.addMixinField("id", fieldId) ;

%>
Action Field

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

One of the most advanced functionalities of this syntax is the ability to plug your own component that shows an interface, enabling you to select the value of the field.

In the generated form, you will see an icon which is configurable thanks to the selectorIcon argument.

You can plug your own component using the selectorClass argument. It must follow the eXo UIComponent mechanism and implements the interface ComponentSelector: 

package org.exoplatform.ecm.webui.selector;


import org.exoplatform.webui.core.UIComponent;

public interface ComponentSelector {

  public UIComponent getSourceComponent() ;

  public void setSourceComponent(UIComponent uicomponent, String[] initParams) ;

}

  • Additional parameters

Parameter Type Required Description Example
selectorClass string
The component to display. selectorClass=org.exoplatform.ecm.webui.tree.selectone.UIOneNodePathSelector
selectorIcon string
The action icon. selectorIcon=SelectPath24x24Icon

Depending on the selectorClass, some other parameters can be added.

For example, the component org.exoplatform.ecm.webui.tree.selectone.UIOneNodePathSelector needs the following parameter:

Parameter Type Required Description Example
workspaceField string
The field which enables you to select a workspace. workspaceField=targetWorkspace

The component org.exoplatform.ecm.webui.selector.UIPermissionSelector does not need any special parameters.

  • Example 

<%

String[] fieldPath = ["jcrPath=/node/exo:targetPath", "selectorClass=org.exoplatform.ecm.webui.tree.selectone.UIOneNodePathSelector", "workspaceField=targetWorkspace", "selectorIcon=SelectPath24x24Icon"] ;

uicomponent.addActionField("targetPath", fieldPath)  ;

%>

The followings are predefined selectors which can be used in the action field to select an object from a list provided by the system. For example, to assign the permission to given users/groups, users must select them from a list of users/groups available in the system.

  • org.exoplatform.ecm.webui.tree.selectone.UIOneNodePathSelector

    Allows selecting the node path.

  • org.exoplatform.ecm.webui.tree.selectone.UIOneTaxonomySelector

    Allows selecting the category path.

  • org.exoplatform.ecm.webui.selector.UIGroupMemberSelector

    Allows selecting the membership of a given group.

  • org.exoplatform.ecm.webui.component.explorer.popup.info.UIGroupSelector

    Allows selecting a group.

  • org.exoplatform.ecm.webui.nodetype.selector.UINodeTypeSelector

    Allows selecting node types.

  • org.exoplatform.ecm.webui.selector.UIPermissionSelector

    Allows selecting permission expressions.

  • org.exoplatform.wcm.webui.selector.UIUserMemberSelector

    Allows selecting users from a users list.

Interceptors

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

To add an interceptor to a dialog, you can use this method uicomponent.addInterceptor(String scriptPath, String type) .

Parameters Type Description
scriptPath string The relative path to the script file.
type string The type of interceptor: prev or post.

  • Example 

<%

uicomponent.addInterceptor("ecm-explorer/interceptor/PreNodeSaveInterceptor.groovy", "prev");

%>
WYSIWYG widget

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

Widgets are natively part of the eXo Platform product to provide a simple and easy way for users to get information and notification on their application. They complete the portlet application that focuses on more transactional behaviors.

WYSIWYG stands for What You See Is What You Get. This widget is one of the most powerful tools. It renders an advanced JavaScript text editor with many functionalities, including the ability to dynamically upload images or flash assets into a JCR workspace and then to refer to them from the created HTML text. 

String[] fieldSummary = ["jcrPath=/node/exo:summary", "options=basic"] ;

uicomponent.addWYSIWYGField("summary", fieldSummary) ;
String[] fieldContent = ["jcrPath=/node/exo:text", "options=toolbar:CompleteWCM,'height:410px'", ""] ;

uicomponent.addRichtextField("content", fieldContent

The "options" argument is used to tell the component which toolbar should be used.

By default, there are five options for the toolbar: CompleteWCM, Default, BasicWCM, Basic, SuperBasicWCM.

  • CompleteWCM: a full set of tools is shown.

The following buttons are shown: Source, Templates, Show Blocks, Cut, Copy, Paste Text, Undo, Redo, SpellCheck, WCM Insert Gadget, Flash, Table, Insert Special Character, WCM Insert Content Link, Bold, Italic, Underline, Strike Through, Justify Left, Justify Center, Justify Right, Justify Full, Ordered List, Unordered List, Text Color, Background Color, Remove Format, Link, WCM Insert Portal Link, Unlink, Anchor, Style, Font Format, Font Name, Font Size, Maximize.

  • Default: a large set of tools is shown, no "options" argument is needed in that case.

The following buttons are shown: Source, Templates, Cut, Copy, PasteText, Undo, Redo, SpellCheck, RemoveFormat, Bold, Italic, Underline, Strike Through, Ordered List, Unordered List, Link, Unlink, Anchor, Image, Flash, Table, Special Character, Text Color, Background Color, Show Blocks, Style, Font Format, Font Name, Font Size, Maximize.

  • BasicWCM: a minimal set of tools is shown.

The following buttons are shown: Source, Bold, Italic, Underline, Strike Through, OrderedList, UnorderedList, Outdent, Indent, Justify Left, Justify Center, Justify Right, JustifyFull, Blockquote, Link, Unlink, WCM Insert Portal Link, WCM Insert Content Link, Show Blocks, Style, Font Format, Font Name, FontSize, Maximize.

  • Basic:

The following buttons are shown: Source, Bold, Italic, Underline, Strike Through, Ordered List, Unordered List, Outdent, Indent, Justify Left, Justify Center, Justify Right, Justify Full, Blockquote, Link, Unlink, Show Blocks, Style, Font Format, Font Name, Font Size, Maximize.

  • SuperBasicWCM:

The following buttons are shown: Source, Bold, Italic, Underline, Justify Left, Justify Center, Justify Right, Justify Full, Link, Unlink, WCM Insert Portal Link, WCM Insert Gadget, WCM Insert Content Link.

There is also a simple text area widget, which has text-input area only:

String [] descriptionArgs = ["jcrPath=/node/exo:title", "validate=empty"];

uicomponent.addTextAreaField("description", descriptionArgs) ;
Content Explorer

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

CSS

  • By using Content, all the stylesheets of each site can be managed online easily. You do not need to access the file system to modify and wait until the server has been restarted. For the structure, each site has its own CSS folder which can contain one or more CSS files. These CSS files have the data, and the priority. If they have the same CSS definition, the higher priority will be applied. You can also disable some of them to make sure the disabled style will no longer be applied into the site.

  • For example, the Platform demo package has two main sites by default: ACME and Intranet. The ACME site has two CSS files called BlueStylesheet and GreenStylesheet. The blue one is enabled and the green one is disabled by default. All you need to test is to disable the blue one (by editing it and setting Available to 'false') and enable the green one. Now, back to the homepage and see the magic.

Note

Remember the cache and refresh the browser first if you do not see any changes. Normally, this is the main reason why the new style is not applied.

CKEditor

Basically, if you want to add a rich text area to your dialogs, you can use the addRichtextField method. However, in case you want to add the rich text editor manually, you first need to use the addTextAreaField method and some additional Javascripts as shown below: 

<script src="/CommonsResources/ckeditor/ckeditor.js"></script>

<div class="control-group">

    <label class="control-label">Description:</label>

    <div class="controls">

        <%

            String[] fieldDescription = ["jcrPath=/node/exo:description"] ;

            uicomponent.addTextAreaField("description", fieldDescription)

        %>

    </div>

</div>

<script>

    CKEDITOR.config.toolbar = "Basic";

    CKEDITOR.replace( 'description' );

</script>

CKEditor Enter mode

When creating/editing content with CKEditor, the Enter mode in CKEditor will determine the default behavior when users press the Enter key.

In eXo Platform, when you press the Enter key inside an editable text region, a new <p/> paragraph is created in the Source editor by default as below.

However, you can change the default behavior of the CKEditor Enter mode (<br/> line breaks or <div/> blocks) when creating a new dialog. For example, if you want the Enter mode to be displayed as <br/> rather than <p/> in CKEditor, simply add the following to the dialog. 

String[] htmlArguments = ["jcrPath=/node/default.html/jcr:content/jcr:data", "options=toolbar:CompleteWCM,height:'410px',noSanitization,enterMode:CKEDITOR.ENTER_BR", htmlContent];

In case you want to change the default value from <p/> to <br/> for an existing dialog, follow the steps:

  1. Click → Content → Content Administration on the top navigation bar.

  2. Select Templates, then click corresponding to one template (for example, Web Content) to open the View & Edit Template form.

  3. Select the Dialog tab, then click corresponding to the dialog that is currently used by the template (for example, dialog1).

  4. Replace the following in the Content field:

    String[] htmlArguments = ["jcrPath=/node/default.html/jcr:content/jcr:data", "options=toolbar:CompleteWCM,height:'410px',noSanitization", htmlContent];

    with the following:

    String[] htmlArguments = ["jcrPath=/node/default.html/jcr:content/jcr:data", "options=toolbar:CompleteWCM,height:'410px',noSanitization,enterMode:CKEDITOR.ENTER_BR", htmlContent];

  5. Save the above change, then go to → Content → Sites Explorer on the top navigation bar to see your change:

    • i. Click on the Action bar.

    • ii. Select the template (Web Content in this example).

    • iii. Enter the content with line breaks by hitting the Enter key.

    • iv. Select in the Main Content field. The behavior of Enter mode is now changed into <br /> as below.

Adding a new ECM template with tabs

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

To avoid refreshing the first tab for every action execution, add a new private function to the template with tabs. In the template, you must insert a new piece of code like the following: 

private String getDisplayTab(String selectedTab) {

if ((uicomponent.getSelectedTab() == null && selectedTab.equals("mainWebcontent"))

      || selectedTab.equals(uicomponent.getSelectedTab())) {

  return "display:block";

  }

  return "display:none";

  }


  private String getSelectedTab(String selectedTab) {

  if (getDisplayTab(selectedTab).equals("display:block")) {

  return "SelectedTab";

  }

  return "NormalTab";

  }

Changing in every event of onClick must be done like the following: 

<div class="UITab NormalTabStyle">
<div class="<%=getSelectedTab("mainWebcontent")%>
  ">
  <div class="LeftTab">
<div class="RightTab">
  <div class="MiddleTab" onClick="<%=uicomponent.event("ChangeTab", "mainWebcontent")%>"><%=_ctx.appRes("WebContent.dialog.label.MainContent")%></div>
</div>
  </div>
</div>
  </div>

  <div class="UITab NormalTabStyle">
    <div class="<%=getSelectedTab("illustrationWebcontent")%>
      ">
      <div class="LeftTab">
    <div class="RightTab">
      <div class="MiddleTab" onClick="<%=uicomponent.event("ChangeTab", "illustrationWebcontent")%>"><%=_ctx.appRes("WebContent.dialog.label.Illustration")%></div>
    </div>
      </div>
    </div>
  </div>

  <div class="UITab NormalTabStyle">
    <div class="<%= getSelectedTab("contentCSSWebcontent")%>
      ">
      <div class="LeftTab">
    <div class="RightTab">
      <div class="MiddleTab" onClick="<%=uicomponent.event("ChangeTab", "contentCSSWebcontent")%>"><%=_ctx.appRes("WebContent.dialog.label.Advanced")%></div>
    </div>
      </div>
    </div>
</div>

Finally, to display the selected tab, simply add it to the style of UITabContent class.

<div class="UITabContent" style="<%=getDisplayTab("mainWebcontent")%>">
Preventing XSS attacks

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

In the content management sytem, its typical feature is enabling JavaScript in a content. This causes the XSS (Cross-site Scripting) attacks to the content displayed in the HTML format.

However, there is no solution to keep JavaScript and to prevent the XSS attacks at the same time, so Content allows you to decide whether JavaScript is allowed to run on a field of the content template or not by using the option parameter.

  • To allow JavaScript to execute, add "options = noSanitization" to the dialog template file. Normally, this file is named dialog1.gtmpl.

  • For example: The following code shows how to enable JavaScript in the Main Content field of the Free Layout Webcontent content: 



      String [] htmlArguments = ["jcrPath = / node / default.html / JCR: content / JCR: data", "options = toolbar: CompleteWCM, height: '410px ', noSanitization" htmlContent];

  • By default, there is no "options = noSanitization" parameter in the dialog template file and this helps you prevent the XSS attacks. When end-users input JavaScript into a content, the JavaScript is automatically deleted when the content is saved.

Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus