AEM 6.1 Table properties dialog and Table options shown | Community
Skip to main content
R
RobertBailey1
Level 4
April 3, 2017

AEM 6.1 Table properties dialog and Table options shown

  • April 3, 2017
  • 2 replies
  • 3473 views

Hi All,

I have a couple of questions regarding the Table properties dialog and Table options which are shown after completing the steps below :-

1. Install aem6-author-p4502.jar
2. Browse to http://localhost:4502/siteadmin#/content/geometrixx-outdoors/en
3. Create a new page called "Testpage"
4. Browse to http://localhost:4502/editor.html/content/geometrixx-outdoors/en/testpage.html
5. Add a table component , Configure the table component , Click on Table properties icon

The default options shown in the Table properties dialog are Width, Height, Caption, Border, Cell padding, Cell spacing.

Is there any way to control or configure what options are shown in the Table properties dialog?

When the Table properties dialog is opened , how does it decide what options are available to show?

When the Table properties dialog is closed , how does it notify the rich text editor to update and re-render itself?

When the rich text editor updates / renders , how does it decide what table options are available to format the table?

Thank you for your time.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

R
RobertBailey1Author
Level 4
April 3, 2017

Is it possible to remove or hide or disable options which are shown in this Table properties dialog?

Thank you for your time.

smacdonald2008
smacdonald2008
Level 10
April 3, 2017

Are you referring to this dialog? 

What controls the behaviour of this component is the code located here: 

/libs/foundation/components/table

R
RobertBailey1Author
Level 4
April 3, 2017

Hi smacdonald2008,

Thank you for replying.

I am referring to the dialog which is displayed when you click on the Table Properties button.

The dialog shows the following options :-

    Width
    Height
    Caption
    Border
    Cell padding
    Cell spacing

I have found some information about this dialog in this article :-

http://experience-aem.blogspot.co.uk/2015/07/aem-61-extend-classic-ui-rich-text-table-plugin-add-summary.html

This article includes the following line of Javascript code which I am currently investigating :-

var fields = dialog.findByType("form")[0];

Do you know if I can configure which of the defaults options are shown and hidden?

Thank you for your time.

R
RobertBailey1Author
Level 4
April 4, 2017

I think I have a solution for this, which I am now testing.   Basically I have used the following article as a starting point :-

http://experience-aem.blogspot.co.uk/2015/07/aem-61-extend-classic-ui-rich-text-table-plugin-add-summary.html

But I have replaced the Javascript code in the article with the Javascript code shown below :-

/* * JavaScript to remove AEM Table Properties which are not required for this AEM project. */ CQ.Ext.ns("ExperienceAEM"); /* The following AEM Table Properties are not required for this AEM project. */ var PROPERTY_NAMES_TO_BE_REMOVED = ["width" , "height" , "caption" , "border" , "cellpadding" , "cellspacing"]; /* Label to display on the Table Properties dialog only if there are NO properties to display. */ var LABEL_NO_PROPERTIES_NEED_CONFIGURING = "No table properties need configuring."; ExperienceAEM.ToolkitImpl = new Class({ toString: "EAEMToolkitImpl", extend: CUI.rte.ui.ext.ToolkitImpl, // Extend the dialog manager. createDialogManager: function(editorKernel) { return new ExperienceAEM.ExtDialogManager(editorKernel); } }); CUI.rte.ui.ToolkitRegistry.register("ext", ExperienceAEM.ToolkitImpl); ExperienceAEM.ExtDialogManager = new Class({ toString: "EAEMExtDialogManager", extend: CUI.rte.ui.ext.ExtDialogManager, createTablePropsDialog: function(cfg) { var dialog = this.superClass.createTablePropsDialog.call(this, cfg); var fields = dialog.findByType("form")[0]; var propertiesToBeRemoved = []; // Iterate through AEM Table Properties and decide which properties to remove. fields.items.each(function(item){ if (PROPERTY_NAMES_TO_BE_REMOVED.indexOf(item.name) > -1){ propertiesToBeRemoved.push(item); } }); // Remove superfluous AEM Table Properties. for (var i = 0, len = propertiesToBeRemoved.length; i < len; ++i){ fields.remove(propertiesToBeRemoved[i]); } // If there are No Table Properties remaining then add a label. if (fields.items.length===0){ fields.add({ "xtype": "static", "text": LABEL_NO_PROPERTIES_NEED_CONFIGURING }); } return dialog; } });
Terms & ConditionsAccessibility statement

Loading footer...