I am having dialog with xtype field as "paragraphreference". When i open the field it is showing the whole content repository. I want to show only current page path in the paragraph reference field. I dont want to overlay the js file. Is there any other solution or property which can give the current page path to show.
Please suggest.
You can do it with 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 currentPath = CQ.WCM.getPagePath();
widget.treeRoot.name = currentPath;
}
});
CQ.Ext.ComponentMgr.registerPlugin('customRootPathPlugin', plugin);
}($CQ));
Also you can take ref from : Click
Related
I'm new to CkEditor plugin development and have a simple question.
Following problem: I have a very 'special', non-consumer oriented media asset storage (stored as a tree hierarchy on the file system). The CkEditor user should find these media assets and so I implemented a plugin for this with a find that loads the tree on the left and displays the media assets on the left side. The user can now choose the tree item and choose the media asset on the left side. The plugin works, the code is generated with an img-Tag. When I double click on the new generated code, the 'image'-plugin-dialog gets loaded and not my custom dialog.
Question:
What can I do to tell CkEditor to open my dialog? I suppose, there is an internal mapping from tag -> dialog and the img-Tag loads the img-Dialog. Which possibilities do I have? Do I have to use custom tags for that?
The problem can be solved by using the 'doubleclick'-Hook, e.g.
initDoubleClickHandler: function(editor) {
editor.on( 'doubleclick', function(e) {
var selection = editor.getSelection();
var start = selection.getStartElement();
var attribute = start.getAttribute('data-type');
if ( attribute != undefined && attribute != null && attribute == 'myplugin' ) {
e.data.dialog = 'myPluginDialog';
}
});
}
The supported and easy way is to create your plugin as a widget with a dialog. You can control how CKEditor knows it's your special object and launches your dialog. You can either use an img with a special css style or create your own custom html tag (e.g. ).
Read the widget tutorial here (dialogs are explained in part 2 of this tutorial).
This question already has an answer here:
SAPUI5 Open link on Button press
(1 answer)
Closed 1 year ago.
I am relatively new to UI5. My search for "[sapui5] icon link" brought no useful results. So here is my question.
I have the following sap.m.Link
<Link id="myLink" href="http://stackoverflow.com/" text="Stackoverflow" />
which displays the text "Stackoverflow" on the UI, and when I click on it, I will navigate to stackoverflow.com. That's the effect I want.
But how can I replace the text with an icon, for example "sap-icon://download"? According to the Link-API, it doesn't have an attribute icon. So is there a way to get the same effect using sap.m.Button that does have this attribute:
<Button icon="sap-icon://download" press=".onDataExport" />
What would the handler onDataExport look like? My idea is to use a (somehow) hidden sap.m.Link and a sap.m.Button containing the icon. The press-handler of the Button would then somehow trigger a 'link clicked' (not sure if that is possible).
My answer comes a bit late, but I hope that it will help others, as I searched for a ready-to-use Link including an Icon (although this does not seem to be the real need of StoneCrusher).
Button which triggers link navigation:
If you want a sap.m.Button to act like a classical link, then you can attach a press event and use window.open in that event, like:
myButton.attachPress(function () {
window.open(url,target);
});
Link with UI5 icon:
If you want to display a sap-icon in a sap.m.Link, then you have to extend the link, include an aggregation which contains the icon and then render the icon before you render the text of the link.
renderer : function(oRm, oControl) {
[...]
oRm.write("<a");
oRm.writeControlData(oControl);
oRm.addClass("sapMLnk sapMLnkMaxWidth touconLink");
oRm.writeClasses();
oRm.write("href=\"javascript:void(0);\" ");
oRm.write(">");
//Render icon
if (icon!="") {
oControl.getAggregation("_icon").setIcon(icon);
oRm.renderControl(oControl.getAggregation("_icon"));
}
oRm.writeEscaped(text);
oRm.write("</a>");
}
I was in need of both and published these and other custom UI5 convenience controls here: www.toucon.fr
Use the below code in your onDataExport function in controller:
sap.m.URLHelper.redirect("https://stackoverflow.com/", true);
Refer to the below link for info: ui5.sap.com/#/sample/sap.m.sample.Link/preview
sorry only got reply in JSON style, but you see what is missing in your code:
jQuery.sap.require("sap.ui.core.IconPool");
var sBack = sap.ui.core.IconPool.getIconURI("nav-back");
var button = new sap.ui.commons.Button({
icon : sBack,
});
I add a class to an input field when the text changes using jquery in the document.onready function.
$('#formid2 input').on('change', function (e) {
$(this).addClass('changed');
});
Is there a way to verify using chrome dev tools whether the class was really added?
Right click the input field, click on inspect element, and then look at the html to see if it is there. Inside the <input> tag you should see class="changed" or whatever the name of the class is that you added.
Here is my goal: I want to click a specific link on one page, and on the page that loads, I want to change a specific class. I am aware of the onClick function, but not sure it can be used here. Is there a way to do this?
Thank you very much.
This jquery would do what you want:
$(document).ready(function(){
var anchor = '#myanchor';
if (window.location.href.indexOf(anchor) > 0) {
//do what you want here, change classes, etc
}
});
you should place this javascript on the second page, change #myanchor for your anchor used.
Make sure to include the jquery library in the second page for this to work.
I have created plugin in TinyMCE to cutomize advimage plugin in it default. I added a browse button at the end of image url textbox in general tab. Here is my code:
tinyMCE.execCommand('mceAdvImgMgr',false,'src');
I can open my plugin. But I don't know how can i pass the value and get it in my plugin?
Because I want to pass ID from advimage(ID of image url image) to my plugin and then after select image from my plugin, it return image url to caller plugin(advimage)?
This is not that difficult, but depends on the point of time or action at which you want to assign the value to a variable.
You may i.e. save the value in the editor object:
tinyMCEPopup.editor.last_selected_value = value;
and get it from there later on
ed.last_selected_value