Disable styles of out of box components in cq5? - aem

I have a requirement to disable/remove "Bold" option of out of box component "text" in CQ5?
Is it possible?

Yes.
The rich text editor can be configured based on your requirements as mentioned here.
Thus, for your requirement, create an nt:unstructured node "rtePlugins" under your richtext widget, and then create another nt:unstructured node "format" under rtePlugins and add the multivalued property called "features" with values as per your requirements i.e., italic and underline.
The json for the same is shown below,
text: { xtype: "richtext", name: "./text", hideLabel: true,
jcr:primaryType: "cq:Widget",
rtePlugins: {
jcr:primaryType: "nt:unstructured",
format: {
features: [ "italic", "underline" ],
jcr:primaryType: "nt:unstructured"
}
}
},

Related

How to style RowEditing plugin

When activating the row editing plugin, the padding is bigger than usual:
Any idea of what can be affecting the layout or how to fix it?
Are you using a custom theme? It looks like the theme variables for rowediting are modified.
You can write changing the following variable: $grid-row-editor-padding
Details on how to manage theme variables here: Theming Ext JS. You could also use the Sencha Themer tool.
The grid is inside a form definition. It inherited the fieldDefaults, so I had to move them inside the fieldset definition and leave the grid outside of it:
Ext.define('App.view.Test', {
extend: 'Ext.form.Panel',
xtype: 'test-form',
layout: 'vbox',
bodyPadding: 20,
fieldDefaults: { //defined here will affect the roweditor plugin
labelAlign: 'top',
margin: 20
},
items: [
{
xtype: 'fieldset',
//fieldDefaults should be moved here and leave the grid untouched
items: [...]
},
{
xtype: 'grid',
[...]
}
});

Autoform bootstrap themes

I'm using aldeed's autoform, simpleschema and collection2. I am looking to change the way the radio buttons / check boxes look. I've read through the documentation but am unable to find how to incorporate different ways how the buttons are visually rendered. On the GIT issue page, I read through how to implement custom class in the schema itself. Example:
"type":{
type: String,
autoform:{
type: "select-radio-inline",
class: "radio-primary",
options: function(){
return [
{label: "Well Known", value: "well-known"},
{label: "Basic", value: "basic"},
{label: "Extended", value: "extended"}
];
},
But somehow it does not change the look of the default radio buttons. Is there a workaround for this?

Extend standard UI5 control

I want to add an additional text property to sap.ui.unified.MenuItem. It currently has only one text property.
I am trying the following
sap.ui.unified.MenuItem.extend("ExtendedMenuItem",{
metadata:{
properties:{
SetText : {type: "string"}
},
aggregations: {
_SecondText : {type: "sap.ui.commons.Label", multiple : false, visibility: "public"}
}
},
init: function(){
var oSecondText = new sap.ui.commons.Label("TL",{
text: this.SetText
});
this.addAggregation("_SecondText",oSecondText);
},
renderer:"sap.ui.unified.MenuItemRenderer"
});
var oTestCopy = new ExtendedMenuItem("TC",{
text: "TEST COPY",
SetText: "CTRL+TEST"
});
but the second text property is not being displayed.
What can i do to add a second text property to a standard UI5 control ?
Here is an example from the official documentation of Custom Controllers. You have to implement the renderer itself to place the new m.Label element on the UI. In the renderer, you can operate with standard HTML elements. For more details, check the linked source.

How to provide custom value on checkbox in cq5 dialog?

I just created a widget inside my dialog in whose xtype=selection i.e checkbox. Is there any way through which i can get my custom value instead of true and false while select and deselecting the check box. suppose i want to get the value "Yes" when i select the checkbox. the alternative way is to handle it inside the jsp of the component but is it possible to handle it at dialog level ?
You can give this a try
{
xtype: "selection",
fieldLabel: "Yes/No",
name: "./yesNo",
hideLabel: false,
type: "checkbox",
allowBlank: true,
jcr:primaryType: "cq:Widget",
fieldDescription: "Check for Yes",
options: {
jcr:primaryType: "cq:WidgetCollection",
option0: {
value: "Yes",
jcr:primaryType: "nt:unstructured",
text: ""
}
}
}
And when reading it properties.get("yesNo","No")

TinyMCE custom formatting for pre

I have looked everywhere and I can't figure out how to add another option to tinyMCE's drop-down for formatting. I would like to duplicate and modify the formatting for the pre tag to also give it a class of .prettyprint so that I can quickly add code snippets to my posts.
It should be technically possible, but how and which file should I amend. Alternatively can I add a button that applies this formatting
You may add something like the following (style_fomats setting) to your tinymce init function in order to add a new option to the styles dropdown. Be aware that the class to be applied should be made available using the content_css configuration setting
style_formats: [{
title: 'block styles'
}, {
title: 'Name_to_be_displayed',
block: 'p',
classes: 'class_to_be_applied',
exact: true
}, {
title: 'inline styles'
}, {
title: 'Red text',
inline: 'span',
classes: 'red',
exact: true
}, {
title: 'Pre formatting',
inline: 'pre',
classes: 'xyzpre',
exact: true
}],
Alternatively can I add a button that
applies this formatting
Yes, you will need to write your own plugin, which is not that difficult.