I am trying to navigate to other pages from my SAP UI-5 App. (HTML's < a href /> )
I used sap.m.Link on my Toolbar to navigate to other pages , and it worked perfectly ;
new sap.m.Link(this.createId("Foo"),{
text: "Foo",
type: "Transparent",
href: myLink
}).addStyleClass("headerLink"),
However I am using VBox in a customTile where I have a text. I want to implement same functionality to my VBox aswell . How can I do it ?
Please note I can't use window.location.replace("http://mywebsite.com/nextPage.html"); because It disallows me to return back to last page I visited.
My customTile looks like this
var iconBox1 = new sap.m.VBox({
items: [
new sap.m.HBox({
items: [
new sap.m.Text({
text: "Foo" // I want to navigate after clicking on this Text or this Box generelly
}).addStyleClass("tileTextDashboard")
]
}).addStyleClass("textNumberConatainer")
]
});
var customTile1 = new sap.m.CustomTile(this.createId("tile1"), {
content: [
iconBox1
],
press: [oController.someFunction, oController]
}).addStyleClass("customTileDashboard");
EDIT : Problem solved !
In case someone has same problem, I am adding my solution :
var myLink= "https://foo.com";
var myLinkO= new sap.m.Link({
text: "text foo",
type: "Transparent",
href: myLink
}).addStyleClass("classFoo");
and now you only need to replace myLinkO in your items array in your VBox
Related
I tried some plugins but wasn't able to follow along.
Basically I want an iframe to add and preview podcasts and other things.
Is there any iframe block like youtube block which comes with grapesjs ?
To my knowledge, there is not a good grapesjs iframe plugin that already exists.
If your use-case is simple, you can just create your own iframe block that has the information you need:
var editor = grapesjs.init({...});
var blockManager = editor.BlockManager;
blockManager.add('iframe', {
label: 'iframe',
content: '<iframe src="<your iframe src here>"></iframe>',
});
If you'd like an iframe component with a customisable src trait, for example, you'd do it like this:
var editor = grapesjs.init({...});
editor.DomComponents.addType("iframe", {
isComponent: el => el.tagName === "IFRAME",
model: {
defaults: {
type: "iframe",
traits: [
{
type: "text",
label: "src",
name: "src"
}
]
}
}
});
editor.BlockManager.add("iframe", {
label: "iframe",
type: "iframe",
content: "<iframe> </iframe>",
selectable: true
});
Here's a working codesandbox: https://codesandbox.io/s/grapesjs-o9hxu
If you need more customization options, you can learn how to create custom blocks and components using the docs:
https://grapesjs.com/docs/modules/Blocks
https://grapesjs.com/docs/modules/Components
https://grapesjs.com/docs/modules/Traits
Is it possible to give a link instead of a message in standard message box in sap ui5? I want to navigate to another view on the click of that link. Is it possible to achieve without creating a new fragment and adding something in the standard message box?
The sap.m.MessageBox does not allow links, but the use of custom actions. Just take a look at the sample Error with custom action. Maybe this will help you.
I had the same problem and found the following solution:
if (!this.oSuccessMessageDialog) {
this.oSuccessMessageDialog = new sap.m.Dialog({
type: sap.m.DialogType.Message,
title: "Success",
state: sap.ui.core.ValueState.Success,
content: [
new sap.m.Text({ text: "Click on\u00a0" }),
new sap.m.Link({
text: "this",
emphasized: true,
press: <your_handler>
}),
new sap.m.Text({ text: "\u00a0Link." })
],
beginButton: new sap.m.Button({
type: sap.m.ButtonType.Emphasized,
text: "OK",
press: function () {
this.oSuccessMessageDialog.close();
}.bind(this)
})
});
}
this.oSuccessMessageDialog.open();
In SAPUI5, you can often bind resource bundle properties to items in several ways. I'm attempting to do it in JavaScript, using data provided by an Odata service, but the methods I've found here so far haven't worked. I've tried two different ways:
How to Use Internalization i18n in a Controller in SAPUI5?
binding issue with sap.m.List and model configured in manifest.json
And neither of these have worked. I feel this is because I'm inside a items list, inside of a dialog that's causing my issue:
My code is:
var resourceBundle = this.getView().getModel("i18n");
if (!this.resizableDialog) {
this.resizableDialog = new Dialog({
title: 'Title',
contentWidth: "550px",
contentHeight: "300px",
resizable: true,
content: new List({
items: {
path: path,
template: new StandardListItem({
title: resourceBundle.getProperty("{Label}"),//"{ path : 'Label', fomatter : '.getI18nValue' }",
description: "{Value}"
})
}
}),
beginButton: new Button({
text: 'Close',
press: function () {
this.resizableDialog.close();
}.bind(this)
})
});
getI18nValue : function(sKey) {
return this.getView().getModel("i18n").getProperty(sKey);
},
Using the 2nd method above, never calls the JavaScript method. I didn't think it would work, as it's more JSON based. The first method, loads the data fine, but instead of showing the resource bundle text, it shows just the text found inside of the {Label} value.
The value found inside of {Label} matches the key found inside of the resouce bundle i.e. without the i18n> in front, like you would have in a view.
Anyone have any suggestions?
Use of formatter will solve your problem, but the way you're doing it is wrong. Try this, it will solve your problem.
var resourceBundle = this.getView().getModel("i18n");
if (!this.resizableDialog) {
this.resizableDialog = new Dialog({
title: 'Title',
contentWidth: "550px",
contentHeight: "300px",
resizable: true,
content: new List({
items: {
path: path,
template: new StandardListItem({
title: {
parts: [{ path: "Label" }],
formatter: this.getI18nValue.bind(this)
},
description: "{Value}"
})
}
}),
beginButton: new Button({
text: 'Close',
press: function () {
this.resizableDialog.close();
}.bind(this)
})
});
}
And the formatter function getI18nValue will be like this,
getI18nValue: function(sKey) {
return this.getView().getModel("i18n").getResourceBundle().getText(sKey);
},
The upload tab of image2 plugin looks like this -
{
id: 'Upload',
hidden: false,
filebrowser: 'uploadButton',
label: lang.uploadTab,
elements: [
{
type: 'file',
id: 'upload',
label: lang.btnUpload,
style: 'height:40px',
onChange: function(evt){
alert('file uploaded');
}
},
{
type: 'fileButton',
id: 'uploadButton',
filebrowser: 'info:src',
label: lang.btnUpload,
'for': [ 'Upload', 'upload' ]
}
]
}
Here in the 'tab' details there is filebrowser field which is equal to 'uploadButton' and filebrowser field is also in UI element object where it is equal to 'info:src'.
I am not implementing Browse Server functionality, only upload functionality. I have implemented it but I want to understand how filebrowser plugin and filebrowser fields are facilitating it?
Can anyone here explain here a little bit in detail as CKEditor documentation does not tell much?
The ck_config.js file has settings which determine the URL of the file browser for various purposes:
config.filebrowserBrowseUrl = '';
config.filebrowserImageBrowseUrl = '';
config.filebrowserFlashBrowseUrl = '';
config.filebrowserUploadUrl = '';
config.filebrowserImageUploadUrl = '';
config.filebrowserFlashUploadUrl = '';
Basically this will be a webpage which appears in a roughly 600px-wide popup.
One of the GET parameters of this URL (automatically added) will be CKEditorFuncNum which determines the callback function for sending the results back to CK.
On selection of a file/path, you would typically do:
window.opener.CKEDITOR.tools.callFunction(ck_callback,pathrel2page);
where ck_callback is the CKEditorFuncNum value and pathrel2page is the selected file.
HTH.
I would like to create two tabs in a Jsp page using YUI 3 (Yahoo UI3).
For Example:
Tab1 Tab2
Tab1:
I am able to create Tab1 using the below java script.
createCustomTabSafari = function(lblTxt,eId){
YUI().use('tabview', function(Y) {
var tabview = new Y.TabView({
children: [{
label: lblTxt,
content: document.getElementById(eId)
}]
});
tabview.render('#demo');
tabview.selectChild(0);
});
}
Now I want to add Tab2 with some static text like label: 'Tab2', content: 'test'. I have tried with createCustomTabSafari ('Tab2','test') but it is created a tab at some other location instead of creating besides the Tab1.
How to use addChilld()/add() method to add the second tab as a child instead of a brand new tab.
I have gone through the YUI API and could see addChild(child, index) method but not sure how to use this method in this scenaenter code hererio.
Also, How to read the tabs that are created that is if I know tab1 is clicked I will display something and if Tab2 is clicked I will display something different.
It would be helpful if I get to know something on adding a second tab next to the Tab1.
Thanks in Advance.
The examples on the YUI website do a really good job of showing how to use the Tabview. You can see this example which has multiple tabs: http://yuilibrary.com/yui/docs/tabview/tabview-fromjs.html
YUI().use('tabview', function(Y) {
var tabview = new Y.TabView({
children: [{
label: 'foo',
content: '<p>foo content</p>'
}, {
label: 'bar',
content: '<p>bar content</p>'
}, {
label: 'baz',
content: '<p>baz content</p>'
}]
});
tabview.render('#demo');
tabview.selectChild(2);
});
And for adding and removing tabs, a rather complex example: http://yuilibrary.com/yui/docs/tabview/tabview-add-remove.html