How can we add a dynamic pathfield(rootPath) for a cq5 component?
Are there any example references?
I think you should use custom widget plugin. First, add property plugins to your pathfield in the dialog.xml:
<myPathComponent
jcr:primaryType="cq:Widget"
fieldLabel="My path component"
plugins="customRootPathPlugin"
xtype="pathfield" />
Then create custom ExtJS plugin. In order to do that, create new JS file, and add it to clientlib with cq.wcm.edit category. Plugin can look like that:
(function($) {
var plugin = CQ.Ext.extend(CQ.Ext.emptyFn, {
init: function(widget) {
var locale = "en";
// create some JS logic to get the locale here
// current path can be obtained via
// widget.findParentByType('dialog').responseScope.path
widget.treeRoot.name = "content/myproject/" + locale + "/mycomponent";
}
});
CQ.Ext.ComponentMgr.registerPlugin('customRootPathPlugin', plugin);
}($CQ));
To expand on Tomek's answer, I was able to get the current page and then display all the siblings and children with this:
(function($) {
var plugin = CQ.Ext.extend(CQ.Ext.emptyFn, {
init : function(widget) {
var url = CQ.HTTP.getPath();
widget.treeRoot.name = url.substring(1, url.lastIndexOf('/') );
}
});
CQ.Ext.ComponentMgr.registerPlugin('customRootPathPlugin', plugin);}($CQ));
The reason I did url.substring(1 instead of url.substring(0 is because I would end up with double forward slash //content/app/en/ in the dialog.
Related
Actaully i am using "before submit" listener to do some validation for my selection box
I have reffered the following link:
https://helpx.adobe.com/experience-manager/using/classic_dialog_validation.html.
But "before submit" method calling only when i place ,
dialog listener in the dialog root level only.
how to place dialog listener in dialog root level(I checked in my project there is no dialog.xml file ,they using only java code to construct component dialog).
Can anyone please help me in this ?enter image description here
Dialog property construction code :
#DialogField(name ="./validateProgram",
fieldLabel = "Validate Program",
fieldDescription = "(synchronized)",
additionalProperties = {
#Property(renderIn = Property.RenderValue.TOUCH,
name = "validation",
value = "validation-program")
},
listeners = {
#Listener(name ="beforesubmit",
value = "function(dialog){" +
"return programValidation.beforeSubmit(dialog);"+
"}")
})
#Selection(
type ="select",
optionsProvider = " ",
dataSource = "/resourcetype/data")
public final String validateProgram;
Java Script code:
window.onload = function() {
programValidation.init();
};
var programValidation= programValidation|| (function($) {
function initialize() {
};
function validate() {
alert("inside validate method");
var res = true;
return res;
};
return {
beforeSubmit: validate,
init: initialize
}
})(jQuery);
You are using the cq component maven plugin this a very vital piece of information to get your question answered.
I have not used this plugin before, but in your case, I assume you are looking for the Listener annotation where you can set the name as beforesubmit and the value as function(){alert(1)}
you'll probably have to set the annotation on a local variable similar to how you would annotate a dialog field '#DialogField', find more docs in the plugin's usage page here: http://code.digitalatolson.com/cq-component-maven-plugin/usage.html
Hope this helps.
Thanks for your support. Found the following way to solve the issue .
I added ValidateFields method from within the 2 listeners (FIELD_LISTENER_LOAD_CONTENT and FIELD_LISTENER_SELECTION_CHANGED)
function ValidateFields(dialog) {
dialog.on("beforesubmit", function(e) {
if(<condtion failed>)
CQ.Ext.Msg.alert(CQ.I18n.getMessage("Error"), CQ.I18n.getMessage("<error message>"));
return false;
} else {
return true;
}
}, this);
}
I have a requirement like I need to have a i18n value in my custom javascript in publish instance. Could anyone please help me with it.
Thanks in advance
There are a couple of ways to do it:
in your js you can access object CQ.I18n which provides localized messages. By default it uses user locale (and not locale of current page/path).
So you can use it in next way:
if (CQ && CQ.I18n) {
CQ.I18n.setLocale(_currentPathLocale_);
var localizedMessage = CQ.I18n.getMessage(messageKey);
}
_currentPathLocale_ you can inject into your js while initialization.
another way would be to inject already localized message.
If you have next js script:
(function($) {
$.fn.myComponent = function(options) {
var defaults = {
message: "Hello!"
}
var opts = $.extend(defaults, options);
var localizedMessage = opts.message;
}
})(jQuery);
Then you can pass from your jsp:
<script type="text/javascript">
$(document).ready(function() {
$("#componentDiv").myComponent({message: "<fmt:message key="messageKey"/>"});
})
</script>
In AEM6, How do I hide a specific component field based on pages for certain country only ?
You can write custom dialog/widget plugin to do that. This is how you attach plugin to your widget:
<title jcr:primaryType="cq:Widget"
fieldLabel="Field to hide"
plugins="hideFieldPlugin"
name="./fieldToHide"
xtype="textfield" />
Next, we need to write plugin and register it:
(function ($) {
var plugin = CQ.Ext.extend(CQ.Ext.emptyFn, {
init: function (fieldToHide) {
var url = CQ.HTTP.getPath();
if (this.shouldBeHidden(url)) {
fieldToHide.hide().disable();
}
},
shouldBeHidden: function (url) {
// some logic
return true;
}
});
CQ.Ext.ComponentMgr.registerPlugin("hideFieldPlugin", plugin);
}($CQ));
JavaScript file needs to be included in Classic UI edit mode. Best way to do that is to use your own custom clientlib or use already existing category, cq.wcm.edit.
If you have more complex logic which goes across multiple widgets, you can attach plugin on dialog level and navigate to the widget objects using dialog.find method.
I am a UI person and very new to ionic framework.. I wanted to add search feature in my android app built using Ionic framework. After a research i found that I will need to use this plugin https://github.com/djett41/ionic-filter-bar. but there is no detail documentation available. Can anyone please guide how to use this plugin working. I have made all setup but stuck with actual code.
First of all you must install the plugin. You can use bower for that:
bower install ionic-filter-bar --save
and it will copy all the javascript and css needed in the lib folder inside www.
Then you must add the references to the css to your index.html:
<link href="lib/ionic-filter-bar/dist/ionic.filter.bar.css" rel="stylesheet">
same thing for the javascript:
<script src="lib/ionic-filter-bar/dist/ionic.filter.bar.js"></script>
You have to inject the module jett.ionic.filter.bar you your main module:
var app = angular.module('app', [
'ionic',
'jett.ionic.filter.bar'
]);
and you must reference the service $ionicFilterBar in your controller:
angular.module('app')
.controller('home', function($scope, $ionicFilterBar){
});
Now you can start using it.
In my sample I want to trigger the search-box when the user clicks/taps on a icon in the header. I would add this HTML to the view:
<ion-nav-buttons side="secondary">
<button class="button button-icon icon ion-ios-search-strong" ng-click="showFilterBar()">
</button>
</ion-nav-buttons>
The action trigger an event in my controller showFilterBar:
$scope.showFilterBar = function () {
var filterBarInstance = $ionicFilterBar.show({
cancelText: "<i class='ion-ios-close-outline'></i>",
items: $scope.places,
update: function (filteredItems, filterText) {
$scope.places = filteredItems;
}
});
};
which creates the $ionicFilterBar and shows it.
As you can see here I am using an array of objects $scope.places
$scope.places = [{name:'New York'}, {name: 'London'}, {name: 'Milan'}, {name:'Paris'}];
which I have linked to the items member of my $ionicFilterBar. The update method will give me in filteredItems the items (places) filtered.
You can play with this plunker.
Another option is to use the plugin to actually fetch some data remotely through $http.
If we want to achieve this we can use the update function again.
Now we don't need to bind the items to our array of objects cause we won't need the filtered elements.
We will use the filterText to perform some action:
$scope.showFilterBar = function () {
var filterBarInstance = $ionicFilterBar.show({
cancelText: "<i class='ion-ios-close-outline'></i>",
// items: $scope.places,
update: function (filteredItems, filterText) {
if (filterText) {
console.log(filterText);
$scope.fetchPlaces(filterText);
}
}
});
};
We will call another function which will, maybe, call $http and return some data which we can bind to our array of objects:
$scope.fetchPlaces = function(searchText)
{
$scope.places = <result of $http call>;
}
Another plunker here.
PS:
If you want to configure it using some sort of customization you must do it in your configuration using the provider $ionicFilterBarConfigProvider:
angular.module('app')
.config(function($ionicFilterBarConfigProvider){
$ionicFilterBarConfigProvider.clear('ion-ios-close-empty');
})
PPS:
In my plunker I've included the css and the script directly copying it from the source.
UPDATE:
Someone asked not to replace the list with the updated one.
My cheap and dirty solution is to check if the filterText contains some values. If it's empty (no searches) we go throught each element an set a property found = false otherwise we compare the places array we the filteredItems array.
Matching elements will be marked as found.
function allNotFound(filteredItems) {
angular.forEach($scope.places, function(item){
item.found = false;
});
}
function matchingItems(filteredItems) {
angular.forEach($scope.places, function(item){
var found = $filter('filter')(filteredItems, {name: item.name});
if (found && found.length > 0) {
console.log('found', item.name);
item.found = true;
} else {
item.found = false;
console.log('not found', item.name);
}
});
and now we can integrate the filter bar this way:
$scope.showFilterBar = function () {
var filterBarInstance = $ionicFilterBar.show({
cancelText: "<i class='ion-ios-close-outline'></i>",
items: $scope.places,
update: function (filteredItems, filterText) {
if (!filterText) {
allNotFound();
} else {
matchingItems(filteredItems);
}
}
});
};
We can use the found attribute of the object to change the style of the element.
As always, a Plunker to show how it works.
Ionic uses Angular, and Angular include an atributte filter very useful. Look this: https://docs.angularjs.org/api/ng/filter/filter and the example there. Regards
I'm trying to add a CSS property dynamically to a control.
I have a group of RadioButton. On selection of any one of the buttons, I want to make one layout visible.
Below are some of the snippets I tried, none of them seem to work!
Snippet-1
showhide: function(){
var fcid = sap.ui.getCore().byId("FC7");
fcid.visibility = "hidden";
}
Snippet-2
showhide: function(){
var fcid = sap.ui.getCore().byId("FC7");
jquery('#fcid').css("visibility","hidden");
}`
Snippet-3
showhide: function(){
var fcid = sap.ui.getCore().byId("FC7");
jquery('#fcid').hide();
}
You cannot use fcid.visibility = "hidden"; and expect it to behave like a DOM object; it's not, it's a Javascript class with getters, setters, events, aggregations, etc.
Therefore, you should use the control's properties instead: fcid.setVisible(true);
See the API docs for the correct signature of the control/layout properties
You can:
var fcid = ...byId("FC7");
fcid.setVisible(false);
Or
fcid.$().hide(); // or every other jquery method
Or
fcid.addStyleClass("hiddenObject");
Last one with Css-Class:
.hiddenObject { display:none; }