I have a requirement where I have add the panel on click on a button.
In the controller function I have written the code like below. I don't get the error in console neither do I get the panel when I click the button.
However when I console.log the panel object I can see the panel is created but not sure why not reflected in the view. suggestions please.
onAddObjectiveClick: function () {
var panel = new Panel({
headerText: "Description",
visible: true,
backgroundDesign: "Solid",
content: new TextArea({
value: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
growing: true,
width: "100%",
height: "263px"
})
});
}
this.getView().addDependent(panel); // at this place I have tried setExapanded and setExpandible function too but none helped.
You are basically creating an object, assigning to a local variable and not adding it to your view.
You should have any kind of container element with an aggregation to add your Panel.
Depending on the container the aggregation name will be different and thus the method you need to call in order to add the Panel to it.
Example: If you need to add this Panel inside the aggregation content of the sap.m.Page class, you should
1) Have the Page
2) Capture it inside the controller
3) call the addContent()
Related
Using TinyMCE 5.7.0
Is there a way to make the "Upload" tab the default tab displayed in the Insert/Edit Image dialog?
I'm looking for a configuration option or programmatic way to do this so we can continue to easily update TinyMCE when new versions come out.
In TinyMCE (5.7.0 in my case, not the minified version), open plugins/image/plugin.js.
Search for these lines (1462 to 1466):
tabs: flatten([
[MainTab.makeTab(info)],
info.hasAdvTab ? [AdvTab.makeTab(info)] : [],
info.hasUploadTab && (info.hasUploadUrl || info.hasUploadHandler) ? [UploadTab.makeTab(info)] : []
])
Reorder the lines like this:
tabs: flatten([
info.hasUploadTab && (info.hasUploadUrl || info.hasUploadHandler) ? [UploadTab.makeTab(info)] : [],
[MainTab.makeTab(info)],
info.hasAdvTab ? [AdvTab.makeTab(info)] : []
])
We had the same requirement and this is how we did it.
Instead of adding the "Upload Image" option to toolbar, create a keyboard shortcut for opening the image upload modal using addShortcut method. Something like this in reactjs:
editor.addShortcut('ctrl+shift+i', 'Open image upload window', function () {
editor.execCommand('mceImage')
});
Now that we have a code block that runs when pressing the shortcut keys, we can add logic inside that block to initiate a click action on the "Upload" button within the modal like this:
setTimeout(() => {
let element = document.querySelectorAll('.tox-dialog__body-nav-item')[1];
if (element) { element.click() }
}, 0)
The setTimeout is added to make sure that the modal is added to DOM before run the querySelectorAll method on the document object is executed. Timeout even with 0 will make sure the code block only executes after all the synchronous tasks are done, which includes the DOM update.
In the end, the final codeblock will look like this:
editor.addShortcut('ctrl+shift+i', 'Open image upload window', function () {
editor.execCommand('mceImage')
setTimeout(() => {
let element = document.querySelectorAll('.tox-dialog__body-nav-item')[1];
if (element) { element.click() }
}, 0)
});
Edit:
If you notice other elements in the DOM with the same class as "tox-dialog__body-nav-item", you can change the querySelectorAll method to make it more well defined and make sure it only selects the class within image upload modal if found. I haven't yet ran into this issue, so this was enough for my case.
I want my text area to be empty after I press OK button.
I have try this line this.byId("id").setValue("")
onWorkInProgress: function (oEvent) {
if (!this._oOnWorkInProgressDialog) {
this._oOnWorkInProgressDialog = sap.ui.xmlfragment("WIPworklist", "com.sap.FinalAssestments.view.WorkInProgress", this);
//this.byId("WIP").value = "";
//this.byId("WIP").setValue();
this.getView().addDependent(this._oOnWorkInProgressDialog);
}
var bindingPath = oEvent.getSource().getBindingContext().getPath();
this._oOnWorkInProgressDialog.bindElement(bindingPath);
this._oOnWorkInProgressDialog.open();
},
//function when cancel button inside the fragments is triggered
onCancelApproval: function() {
this._oOnWorkInProgressDialog.close();
},
//function when approval button inside the fragments is triggered
onWIPApproval: function() {
this._oOnWorkInProgressDialog.close();
var message = this.getView().getModel("i18n").getResourceBundle().getText("wipSuccess");
MessageToast.show(message);
},
The text area will be in popup in the fragment. I am expecting the text area to be empty.
If you instantiate your fragment like this:
sap.ui.xmlfragment("WIPworklist", "com.sap.FinalAssestments.view.WorkInProgress", this);
You can access its controls like this:
Fragment.byId("WIPworklist", "WIP").setValue(""); // Fragment required from "sap/ui/core/Fragment"
Source: How to Access Elements from XML Fragment by ID
The better approach would be to use a view model. The model should have a property textAreaValue or something like that.
Then bind that property to your TextArea (<TextArea value="{view>/textAreaValue}" />). If you change the value using code (e.g. this.getView().getModel("view").setProperty("/textAreaValue", "")), it will automatically show the new value in your popup.
And it works both ways: if a user changes the text, it will be automatically updated in the view model, so you can access the new value using this.getView().getModel("view").getProperty("/textAreaValue");.
You almost have it, I think. Just put the
this.byId("WIP").setValue("") line after the if() block. Since you are adding the fragment as a dependent of your view, this.byId("WIP") will find the control with id "WIP" every time you open the WIP fragment and set its value to blank.
You are likely not achieving it now because A. it is not yet a dependent of your view and B. it is only getting fired on the first go-around.
I struggle to understand the automatic focus handling in SAPUI5 and how to change its default behavior:
Let's say I have a ResponsivePopover with a SearchField in it. When I open the popover, the SearchField gets focused automatically.
However when there is an <endButton> aggregation with a Button in it, it gets the focus instead.
Try it out here: JSbin: Focus in ResponsivePopover
function showPopover(oEvent) {
var oRespPopover = new ResponsivePopover({
showHeader: true,
title: "title",
content: [
new SearchField(),
// ...
],
/*
endButton: new sap.m.Button({
text: 'close',
press: function(oEvent) {
oRespPopover.close();
}
}),
*/
afterClose: function(oEvent) {
oEvent.getSource().destroy();
}
});
oRespPopover.openBy(oBtn);
};
General question
Where is defined which Control gets the focus and how can I change this behavior?
I checked the Implementing Focus Handling documentation on this topic, but did not manage to achieve anything.
My specific case
How can I prevent that the SearchField gets the focus (because that triggers the keyboard on mobile devices), without having an EndButton aggregation?
If the target focus control has a stable ID, you can assign that ID to the initialFocus association of the sap.m.ResponsivePopover, sap.m.Dialog, or sap.m.Popover so that the target control gets focused even if there are buttons in the end/beginButton aggregation.
Focus on the popover is set in the sequence of beginButton and endButton, when available. But if a control other than these two buttons needs to get the focus, set the initialFocus with the control which should be focused on. src
In XML:
<ResponsivePopover initialFocus="myFocusableControl"><!--Same for Dialog, Popover, ...-->
<content>
<SomeFocusableControl id="myFocusableControl" />
</content>
</ResponsivePopover>
Or in JS (Controller):
new ResponsivePopover({ // Same for Dialog, Popover, ...
initialFocus: this.getView().createId("myFocusableControl"),
content: [
new SomeFocusableControl({
id: this.getView().createId("myFocusableControl"),
}),
],
// ...
});
Note: For mobile devices, initial focus does not trigger opening the on-screen keyboard.
Setting initialFocus to input controls doesn't open the On-Screen keyboard on mobile device as, due to browser limitation, the On-Screen keyboard can't be opened with JavaScript code. The opening of On-Screen keyboard must be triggered by real user action. src
I am migrating the AUI popup dialog window from liferay 6.1 to liferay 6.2. I see that there are some specific changes to be made. I had some problems with display of buttons but it is resolved now. But the problem is with the close icon (x) which should be on the top right corner. It disappeared suddenly as soon as I added a save button.
Here is my code:
myPopup = AUI().use('aui-base','liferay-util-window','aui-io-deprecated', 'event', 'event-custom', function(A) {
var buttons =[{
cssClass: 'button_close',
label: 'Save',
render:true,
id: 'myPopupButton',
on: {
click: function() {
myPopupSubmit();
}}
}];
myPopup = Liferay.Util.Window.getWindow(
{
dialog: {
title : a + ' mytitle',
centered : true,
height : 600,
width : 500,
draggable : true,
resizable : true,
modal : true,
toolbars: {
footer:buttons
},
}}).plug(A.Plugin.IO, {
uri : url
}).render();
myPopup.show();
});
}
Please let me know if you have any idea on it..
on myPopupSubmit I have also written code to close the popup as:
top.document.getElementById('closethick').click();
Since there is no closethick button it returns null.
Using the modal dialog example as a comparison, the X close button is removed when using the toolbars property.
Reviewing the source code for the toolbars property (line 309 at time of writing this) indicates that if you use this property directly, you'll need to include your own X close in the header.
An alternative would be to use the addToolbar function (as seen in the example) to include your buttons while preserving the default toolbars.
modal.addToolbar([{
cssClass: 'button_close',
label: 'Save',
render:true,
id: 'myPopupButton',
on: {
click: function() {
myPopupSubmit();
}
}
}]);
I would also consider making the instance of the dialog available to your myPopupSubmit function so that you would have direct access to perform dialog.hide() or calling dialog.hide() after myPopupSubmit versus using the X close approach.
If sticking with the current approach, the id being used will not work, you'll need to use a CSS selector as the YUI based id will change.
I've been trying to figure out how to create and display a form inside of a Dialog using Dojo 1.7.
I want my dialog to look something like this:
All the samples I have seen do it using Markup, but none using AMD
When you create a dialog, you can use a widget (e.g. a form) as content. So, for example, you could do:
require([
"dijit/Dialog",
"dijit/form/Form",
"dijit/form/TextBox",
"dijit/form/Button",
"dojo/domReady!"
], function(Dialog, Form, TextBox, Button)
{
var form = new Form();
new TextBox({
placeHolder: "Name"
}).placeAt(form.containerNode);
new Button({
label: "OK"
}).placeAt(form.containerNode);
var dia = new Dialog({
content: form,
title: "Dialog with form",
style: "width: 300px; height: 300px;"
});
form.startup();
dia.show();
});//~require
require() is provided by Dojo. It loads the dependencies (Form, Dialog etc) and then runs the given function which creates the widgets. However, because we include domReady! among the dependencies, Dojo makes sure the DOM is fully loaded and ready first.
Because I have dia.show() in that function too, the dialog will actually be shown as soon as the page is opened. Let's say you wanted to show the dialog when some button on your page is clicked instead:
require([
"dijit/Dialog",
"dijit/form/Form",
"dijit/form/TextBox",
"dijit/form/Button",
"dojo/on", // Added this!
"dojo/domReady!"
], function(Dialog, Form, TextBox, Button, onEvent)
{
// ... as above, we create the dialog and form when the page loads
// but it remains hidden until we call dia.show() ...
form.startup();
// dia.show(); Commented out this!
onEvent(document.getElementById("someButtonOnYourPage"), "click",
function()
{
dia.show();
});
});//~require