I have tried to set a title for my vizFrame chart in SAP UI5, I have used title attribute in vizFrame control in my view, but it is not working and showing a default title as "Title of Chart". Could someone please help me how to set a title to it.
There are 2 possibilities:
Set it in Javascript code (e.g. in 'onInit' of the controller):
var oChart = this.getView().byId("idVizFrame");
var asyncChartUpdate = function() {
oChart.setVizProperties({
title: {
text: "Your title"
}
});
};
setTimeout(asyncChartUpdate, 0);
I did this asynchronously because it didn´t work for me synchronously.
Set it in XML view:
<viz:VizFrame id="idVizFrame"
vizProperties="{ title: {text : 'Your Title', visible : true}}"
width="100%" vizType="column" uiConfig="{applicationSet:'fiori'}">
in Javascript it is work as synchronously.
code should be:
oChart.setVizProperties({
title: {
text: "Your title",
visible : true
}
});
Related
I am trying the center the title of the echarts component by setting
title:{
text: "My Title",
textStyle:{
align: "center"
}
}
But it is not working.
I have referred the official document(https://echarts.apache.org/option.html#title.textStyle.align) on this.
JSFiddle link : http://jsfiddle.net/jeffersonswartz/y8zs5coq/5/
Thanks.
That should be title.left = 'center' instead of title.textStyle.align. Help you updated at http://jsfiddle.net/ovilia/06u9xpj4/ .
title.textStyle.align is used to align the text within the position. For example, if you set title.textStyle.width and title.textStyle.align, they can work together.
This also works great:
title : {
text:"foo",
subtext:"bar",
x:'center'
}
You have to set title.left property to center:
title: {
text: 'My Title',
left: 'center',
},
JSFiddle link: http://jsfiddle.net/xguL0vrk/
Also tested with ECharts 5.0.1
I need to add an image on the header of a freestyle portal site which when clicked should open a new window with a specific URL.
Currently tried adding the below code but it appears very small, just like a profile picture. But our requirement is to make it appear more like a logo and on the right side (as an header end item).
var oImageItem = new sap.ushell.ui.shell.ShellHeadItem("imageId", {
icon: "/images/image1.png",
tooltip: "Click here",
//height: "100%",
showSeparator: false,
href: "HarcodeURL",
target: "_blank"
});
oRendererExtensions.addHeaderEndItem(oImageItem);
This link could be very interesting: How to place logo or icon at the Center of Unified Shell header?
You have to change "Center" to "Right" and "Icon" to "Image"
That would look like this:
var oShell = new sap.ui.unified.Shell("oShell", {
header: [
new sap.m.FlexBox({
justifyContent: sap.m.FlexJustifyContent.Center,
items: [
new sap.ui.core.Icon({
src: "sap-icon://home"
})
]
})
]
});
You also could change the "FlexBox" to a "VBox".
This element doesn't exist. Use the "sap.m.Image" element. (SDK sap.m.Image)
Code with XML: <m:Image src="/images/image1.png" width="100px" press="openNewWindow">
Code with JS:
var oImageItem = new sap.m.Image("imageId", {
src: "/images/image1.png",
tooltip: "Click here",
width: "100px",
press="openNewWindow"
});
Press Event in Controller:
openNewWindow: function(){
window.open("https://www.hypej.com");
},
I'm trying to add Page into IconTabFilter and i've got, but only the title is projected on the screen.
IconTab view :
createContent : function(oController) {
var oPage = new sap.m.Page({title: "IconTab",showHeader: false});
var oIconTab = new sap.m.IconTabBar ("idTabBar",{});
var itemBar1 = new sap.m.IconTabFilter({
key:"tab1",
icon:"sap-icon://database",
content:[ new sap.ui.view({id:"idTabIcon",viewName:"prova5.tabIcon1", type:sap.ui.core.mvc.ViewType.JS})
]
})
oIconTab.addItem(itemBar3);
oPage.addContent(oIconTab);
return oPage;
}
content of IconTabFilter view:
createContent : function(oController) {
var oPage = new sap.m.Page({
title: "Icon Tab Page 1",
showNavButton: true,
navButtonPress: oController.navButtonMethod
});
var obutton = new sap.m.Button({text: "hello"});
oPage.addContent(obutton);
return oPage;
}
any solution?
The problem appears when using sap.m.Page in your view as a return value in the createContent function. If the usage of sap.m.Page in your view is not necessary for your purpose try to return another control (e.g. sap.m.FlexBox). That solved the problem for me.
Try to Inspect Elements and find out div and in the
class ".sapMITBContent" add height in Pixel around 500px and you will get page visible.
I tried to implement split app feature in my mobile application .But after navigating to the Detail2 page a "back" navigation button is put , which does not work when pressed .
I have placed my code below : (Revert back if you need more info on that)
view.js file (content) :
sap.ui.jsview("split_app.first_view", {
getControllerName : function() {
return "split_app.first_view";
},
createContent : function(oController) {
var olist1 = new sap.m.StandardListItem({
type: sap.m.ListType.Active,
title: "to detail 1",
tap: function(){
osplit.toDetail("detail1");
}
});
var olist2 = new sap.m.StandardListItem({
type: sap.m.ListType.Active,
title: "to detail 2",
tap: function(){
osplit.toDetail("detail2");
}
});
var otext = new sap.m.Label({
text: "first label",
});
var osplit = new sap.m.SplitApp("split");
var odetail1 = new sap.m.Page("detail1", {
title: "first details",
content: [
otext
]
});
var odetail2 = new sap.m.Page("detail2",{
title: "second Details",
showNavButton: true,
navButtonPress: function(){
osplit.toMaster("masterPage");
app.back();
},
content: [
new sap.m.Label({
text: "second label"
})
]
});
var omaster1 = new sap.m.Page("masterPage", {
title: "master page",
content:[
new sap.m.List({
items : [ olist1, olist2 ]
}) ]
});
osplit.addMasterPage(omaster1);
osplit.addDetailPage(odetail1).addDetailPage(odetail2);
osplit.setMode("ShowHideMode");
return new sap.m.Page({
title: "Title",
content: [
osplit
]
});
}
Assuming you want to navigate one step back in your Detail Area (right side) you can call the backDetail() function of your SplitApp Object when clicking on the back button (navButtonPress):
osplit.backDetail();
The same function works for back navigation in your Master Area (left side):
osplit.backMaster();
If you want to navigate back within your app object, make sure that there is a previous page you come from and all pages are known to the App object (probably in your index.html file):
I´ve just tested your code and it worked for me to navigate within the SplitApp using above mentioned functions as well as navigating back in the App with the following declaration (in your index or wherever you host the App object):
var app = new sap.m.App();
var init = sap.ui.view({
id : "idinit",
viewName : "stackovertest.init",
type : sap.ui.core.mvc.ViewType.JS
})
var page = sap.ui.view({
id : "idsplit_app1",
viewName : "stackovertest.split_app",
type : sap.ui.core.mvc.ViewType.JS
});
app.addPage(init);
app.addPage(page);
After coming from the init page you can use
app.back();
Hopefully this helps you.
I have an XTemplate to display html data as shown below
var headerTmp = new Ext.XTemplate(
'<br><br><br>',
'<div class="contact-display-container" style="height:100px; width:400px">',
'<div style="font-size:12px; left:15px">Hello </div>',
'</div>',
'<br><br><br>'
);
I am referring the data in a dataview
var dataView1 = new Ext.DataView({
autoScroll: false,
tpl: headerTmp,
itemSelector: 'div.contact-display-container'
});
I am trying to display the data in a window
var win = new Ext.Window({
height:700,
width:700,
border:false,
modal:true,
title: 'Review Contact Information',
items:[{
layout : 'vbox',
items : [dataView1]
}],
buttons:[{
text: 'Cancel',
handler:function(){
win.close();
}
}]
});
win.show();
But the data "Hello" is not displayed on the window. Can you please tell me where am I going wrong.
Thanks in advance :)
A dataview should be bound to an instance of a store. Try adding a store config to your dataview.
You are overnesting items in your window. You should add dataView directly as a child item to your window. If you need an extra parent level panel, either change it's layout to something like fit or if you want to keep it as a vbox, add a flex config to the dataview.
Here's a working example:
http://jsfiddle.net/KUqM9/419/