My Goal is to launch a popup or dialog or messagebox whatever pops up and is able to contain the graph.
Dialog is working but chart data is not coming in sapui5
Using SAPUI5's JSView to create the dialog and Radial Chart, triggered by button press event, you can have a look at the full application here SAPUI5 Dialog
openDialog: function() {
if (!this.draggableDialog) {
this.draggableDialog = new Dialog({
title: "Charts",
type: "Message",
contentWidth: "900px",
contentHeight: "700px",
resizable: true,
content: [
new RadialMicroChart({
percentage: 75,
total: 100,
size: "Responsive",
valueColor: "Critical"
})
],
beginButton: new Button({
text: "Close",
press: function() {
this.draggableDialog.close();
}.bind(this)
})
});
this.getView().addDependent(this.draggableDialog);
}
this.draggableDialog.open();
}
Related
I have the dropdown in dialog as:
if (!this.pressDialog) {
this.pressDialog = new Dialog({
title: "Wafer",
contentWidth: "40px",
contentHeight: "300px",
content: [
new sap.m.Text({width:'100%', text: 'Component Name' }),
new sap.m.Select({
width: '60%',
items: [
new sap.ui.core.Item("item11", {text: "Disregarded"}),
new sap.ui.core.Item("item12", {text: "Corporation"}),
new sap.ui.core.Item("item13", {text: "Partnership"})
]
}),
new sap.m.Text({ width:'100%',text: 'Category' }),
new sap.m.Select({
width: '60%',
items: [
new sap.ui.core.Item("item1111", {text: "Disregarded"}),
new sap.ui.core.Item("item1234", {text: "Corporation"}),
new sap.ui.core.Item("item1314", {text: "Partnership"})
]
}),
new sap.m.Text({width:'100%', text: 'Quantity' }),
new sap.m.Select({
width: '60%',
items: [
new sap.ui.core.Item("item15211", {text: "Disregarded"}),
new sap.ui.core.Item("item136454", {text: "Corporation"}),
new sap.ui.core.Item("item213754", {text: "Partnership"})
]
}),
new sap.m.Text({width:'100%', text: 'MainCategory' }),
new sap.m.Select({
width: '60%',
items: [
new sap.ui.core.Item("item11411", {text: "Disregarded"}),
new sap.ui.core.Item("item34", {text: "Corporation"}),
new sap.ui.core.Item("item314", {text: "Partnership"})
]
})],
beginButton: new Button({
type: ButtonType.Emphasized,
text: "OK",
press: function () {
this.pressDialog.close();
}.bind(this)
}),
endButton: new Button({
text: "Close",
press: function () {
this.pressDialog.close();
}.bind(this)
})
});
//to get access to the global model
this.getView().addDependent(this.pressDialog);
}
It looks as:
How can I capture the data here from the dialog box and add to the table having the columns as same as each item,
Component Name,
Category,
Quantity,
main category
I am trying how can I make a JSON from the values of selected dropdown so that can bind to the table
Sorry for one more Q: how can I center the select boxes in a dialog
Any help or guiding links are appreciated TIA!
So, what I understand is that you want to make a Json model from the selected dropdown (sap.m.Select). We first create the model :
let model= {
"componentName": "Disregarded",
"category": "Disregarded",
"quantity": "Disregarded",
"mainCategory": "Disregarded",
};
let jsonModel = new JSONModel(model);
this.getView().setModel(jsonSetting, "tableModel");
Than for each sap.m.Select we have something like this (example for category):
new sap.m.Select({
width: '60%',
textAlign: "Center",
selectedKey: "{tableModel>/category}",
items: [
new sap.ui.core.Item("item1111", {text: "Disregarded",key:"Disregarded"}),
new sap.ui.core.Item("item1234", {text: "Corporation",key:"Corporation"}),
new sap.ui.core.Item("item1314", {text: "Partnership",key:"Partnership"})
]
}),
You have to add key for each sap.ui.core.Item like the desirable text and than to specify dynamic binding between the model and selected item selectedKey: "{tableModel>/category}". When another item is selected the change will be visible in the model.
To center the text in the select boxes use textAlign: "Center" and if you want to center against the dialog use sap.m.FlexBox:
new sap.m.FlexBox({
justifyContent: "Center",
items:[
new sap.m.Select({
...
}),
]
}
),
If the select boxes appear wrapped delete property width:60%
Now you have the model ready and you can bind it with the table (I think you want this in the function of OK button ).
Note that the variable model will specify the initial selected keys for each sap.m.Select (everyone set to Disregarded).
I need to add more items to the SelectDialog control based on the Odata from the backend based on a condition. The code is,
if (!this._oDialog) {
this._oDialog = new sap.m.SelectDialog({});
this._oDialog.setModel(oParentModel);
this._oDialog.bindAggregation("items", {
path: "/et_getSidSet",
template: new sap.m.StandardListItem({
title: "{Sid}"
})
});
if (v === '1') {
var oItem1 = new sap.m.StandardListItem({
title: 'PC2',
type: 'Active'
});
this._oDialog.addItem(oItem1);
} else if (v === '2') {
var oItem1 = new sap.m.StandardListItem({
title: 'AC2',
type: 'Active'
});
this._oDialog.addItem(oItem1);
var oItem2 = new sap.m.StandardListItem({
title: 'IC2',
type: 'Active'
});
this._oDialog.addItem(oItem2);
}}
The issue is, when I click on helprequest icon, the item is not adding for the very first time. However, its added from second time onwards.
I need the item to get added for the first time.
Thanks in advance!
Using SAPUI5's JSView to create the dialog and Radial Chart, triggered by button press event, you can have a look at the full application here Plunkr Example
openDialog: function() {
if (!this.draggableDialog) {
this.draggableDialog = new Dialog({
title: "Charts",
type: "Message",
contentWidth: "900px",
contentHeight: "700px",
resizable: true,
content: [
new RadialMicroChart({
percentage: 75,
total: 100,
size: "Responsive",
valueColor: "Critical"
})
],
beginButton: new Button({
text: "Close",
press: function() {
this.draggableDialog.close();
}.bind(this)
})
});
this.getView().addDependent(this.draggableDialog);
}
this.draggableDialog.open();
}
Can anyone help me in creating a form inside a layout window in extjs 3.4. like this? I tried using Ext.Formpanel but it shows error.
Ext.onReady(function() {
// tabs for the center
var tabs = new Ext.TabPanel({
region: 'center',
margins: '3 3 3 0',
activeTab: 0,
defaults: {
autoScroll: true
},
items: [
{
title: 'Movie Grid',
},
{
title: 'Movie Description',
},
{
title: 'Nested layout',
},
{
title: 'The bomb',
}
]
});
// Panel for the west
var nav = new Ext.Panel({
title: 'Movie Information Form',
region: 'west',
split: true,
width: 200,
collapsible: true,
margins: '3 0 3 3',
cmargins: '3 3 3 3',
});
var win = new Ext.Window({
title: 'Button',
closable: true,
width: 600,
height: 350,
//border: false,
plain: true,
layout: 'border',
items: [
nav,
tabs
]
});
win.show(this);
});
This is the js file for creating a layout window. I need to create a form inside "movie information form".
I have solved error in your code.Please check & reply.
https://fiddle.sencha.com/#view/editor&fiddle/2750
I have removed this which was passed to show() of window.
I'm trying to show sap.m.Select when dialog pop up. And my dialog is opening when I press a button. So I create sap.m.Dialog dynamically when user press the button. Here how I create my dialog in controller in buttonPress function:
that = this;
var dialog = new Dialog({
id : 'reasonDialog',
title: 'Reason',
type: 'Message',
content: [
that.reasonTypeSelect,
new TextArea('id1Textarea', {
width: '100%',
maxLength: 100,
placeholder: 'Enter a reason explanation'
})
],
beginButton: new sap.m.Button({
text: 'Confirm',
press: function () {
MessageToast.show('Succesfully confirmed');
dialog.close();
}
}),
endButton: new sap.m.Button({
text: 'Cancel',
press: function () {
dialog.close();
}
}),
afterClose: function() {
dialog.destroy();
}
});
dialog.open();
and I'm creating that.reasonTypeSelect in onAfterRendering function as below :
var oItemSelectTemplate = new sap.ui.core.Item({
key : "{key}",
text : "{value}"
});
this.reasonTypeSelect= new sap.m.Select({ id: 'selectReasonTypeId',
width:'100%',
change:'handleReasonTypeSelect'
});
this.reasonTypeSelect.setModel(this.getView().getModel());
this.reasonTypeSelect.bindAggregation("items", "/ReasonTypeList", oItemSelectTemplate);
Here I can see the Select but there is no items in it.
Seems you model is not visible from the dialog component, try setting your model
oDialog.setModel(yourModel);
If it doesn't work try to do it in the "onAfterRendering" callback.
onAfterRendering: function() {
var oDialog = sap.ui.getCore().byId("reasonDialog");
oDialog.setModel(this.getView().getModel("YourModel"));
}
How can I add or associate data to a custom menu button in TinyMCE? My code goes like this:
tinyMCE.init({
selector: 'textarea',
toolbar: " example",
setup: function (ed) {
ed.addButton('example', {
type: 'menubutton',
title: 'Insert Latest Newsletter Link',
icon: false,
text: 'Insert Latest Newsletter Link',
menu: [{text: "Insert Link", onclick: function () {
//this is where i want to retrieve data that
//i associated with my button
} }]
});
}
The solution is by using 'value' in the menu object like:
editor.addButton( 'gavickpro_tc_button', {
title: 'My test button',
type: 'menubutton',
icon: 'icon gavickpro-own-icon',
menu: [
{
text: 'Menu item I',
value: 'Text from menu item I',
onclick: function() {
editor.insertContent(this.value());
}
}
]
});
menu:[[object1],[object2],[object3]]
displays the object1,object2, object3 in custom button menu