Hi ,
I am trying to enhance one of my custom component by adding an additional field on dialog . Nature of field is mandatory ( i.e. required="{Boolean}true" ) and hence we have put default text ( value="some text" . But this mechanism works only when the enhanced component is dragged ( and dropped ) newly on a page. For an existing instace the default values do not get populated ( even if I try to open the dialog and edit ). Some event is triggered for new instance (drag-n-drop) but not able to capture that event in edit-config or somewhere else. Also there is a potential risk that if I am able to find that event and trigger it using custom js function the other existing fields values as well will be overwritten ( or made blank). Anyone faced this issue especially enhancement of existing dialog ? can this be addressed by making use of design-dialog ?
Regards
Shailesh
sample code
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
Hi @ShaileshPa did you try by writing a custom JS on the dialog to populate some text in RTE/textfield?
You can use something like: (chatGPT generated code)
;(function (window, $) {
'use strict';
var RichTextDefaultContent = function () {
var CONST = {
TARGET_GRANITE_UI: '.coral-RichText-editable'
};
function init() {
$(document).on('foundation-contentloaded', function () {
$(CONST.TARGET_GRANITE_UI).each(function() {
var $rteField = $(this);
var $field = $rteField.closest('.richtext-container').find('input.coral-Form-field');
var defaultContent = $field.attr('data-default') || 'Enter your default content here...';
if ($rteField.text().trim().length === 0) {
$rteField.html(defaultContent);
$rteField.data('default-set', true);
}
});
});
// Register the validator
$(window).adaptTo('foundation-registry').register('foundation.validation.validator', {
selector: CONST.TARGET_GRANITE_UI,
validate: function (el) {
var $rteField = $(el);
var $field = $rteField.closest('.richtext-container').find('input.coral-Form-field');
var defaultContent = $field.attr('data-default') || 'Enter your default content here...';
if ($rteField.text().trim().length === 0) {
$rteField.html(defaultContent);
}
return null; // No validation logic needed for default content
}
});
// Ensure default content is saved
$(document).on('submit', 'form', function () {
$(CONST.TARGET_GRANITE_UI).each(function() {
var $rteField = $(this);
var $field = $rteField.closest('.richtext-container').find('input.coral-Form-field');
var defaultContent = $field.attr('data-default') || 'Enter your default content here...';
if ($rteField.text().trim() === defaultContent) {
$rteField.empty(); // Prevent submitting default content as actual value
} else {
$field.val($rteField.html()); // Save the actual RTE content
}
});
});
}
return {
init: init
}
}();
RichTextDefaultContent.init();
})(window, Granite.$);
In the dialog's XML, make sure to add the extraClientlibs on top and data-default attribute inside RTE/textfield tag. For Example: data-default = "default content..."
hi @ShaileshPa ,
please consider other simpler options (few below) to achieve this rather than customizations
variable : "authored value" : "default value"
Thanks,
Anil
Hi Anil,
thanks for the quick responce , I will try these options although a quick question is all these solutions will work on "include of the component" i.e. when the component is dropped newly , but I already have high number of instances where this new field is added, and i want these existing instances also to have this value populated, how will that work?
hi @ShaileshPa ,
yes, second/3rd option changes are being made on HTL. So it will work for the existing components as well
It may be easier to manage the Default Value by Sling Models.
@Default allows to specify default value for fields (including arrays)
@ValueMapValue
@Default(values="Contact Us")
private String title;
@ValueMapValue @Default(intValues={1,2,3,4})
private int[] integers;
Ref: https://techrevel.blog/2017/03/18/sling-model-annotations/
For new instances, the UI will ascertain that value is persisted. For old, you can use a default value. You can also make the default value configurable, by configuring it via policies.
Hi Aanchal,
as you said
For new instances, the UI will ascertain that value is persisted. For old, you can use a default value. You can also make the default value configurable, by configuring it via policies.
For old instances @default did not work to populate value on component node , as this is an enhancement to existing content/node , will @default work to populate value ?
Hi @ShaileshPa did you try by writing a custom JS on the dialog to populate some text in RTE/textfield?
You can use something like: (chatGPT generated code)
;(function (window, $) {
'use strict';
var RichTextDefaultContent = function () {
var CONST = {
TARGET_GRANITE_UI: '.coral-RichText-editable'
};
function init() {
$(document).on('foundation-contentloaded', function () {
$(CONST.TARGET_GRANITE_UI).each(function() {
var $rteField = $(this);
var $field = $rteField.closest('.richtext-container').find('input.coral-Form-field');
var defaultContent = $field.attr('data-default') || 'Enter your default content here...';
if ($rteField.text().trim().length === 0) {
$rteField.html(defaultContent);
$rteField.data('default-set', true);
}
});
});
// Register the validator
$(window).adaptTo('foundation-registry').register('foundation.validation.validator', {
selector: CONST.TARGET_GRANITE_UI,
validate: function (el) {
var $rteField = $(el);
var $field = $rteField.closest('.richtext-container').find('input.coral-Form-field');
var defaultContent = $field.attr('data-default') || 'Enter your default content here...';
if ($rteField.text().trim().length === 0) {
$rteField.html(defaultContent);
}
return null; // No validation logic needed for default content
}
});
// Ensure default content is saved
$(document).on('submit', 'form', function () {
$(CONST.TARGET_GRANITE_UI).each(function() {
var $rteField = $(this);
var $field = $rteField.closest('.richtext-container').find('input.coral-Form-field');
var defaultContent = $field.attr('data-default') || 'Enter your default content here...';
if ($rteField.text().trim() === defaultContent) {
$rteField.empty(); // Prevent submitting default content as actual value
} else {
$field.val($rteField.html()); // Save the actual RTE content
}
});
});
}
return {
init: init
}
}();
RichTextDefaultContent.init();
})(window, Granite.$);
In the dialog's XML, make sure to add the extraClientlibs on top and data-default attribute inside RTE/textfield tag. For Example: data-default = "default content..."
yeah, finally we opted to create our own js function which load on on-dialog-open and then detect the mandatory field and then fill them with desired value. although its a workaround its working now as expected.
Views
Likes
Replies
Views
Likes
Replies