new sap.m.Button("manualimage",{
icon : 'resources/Green.JPG',
width : "40px",
height : "40px",
press :function(e) {
var myBtn = sap.ui.getCore().byId("manualimage");
console.log(document.getElementById("manualimage").icon);
myBtn.setIcon('');
}
})
When I click on the button the Icon is not changing, any suggestions what I might be doing wrong here?
Below is my code which is working ( on UI5 version 1.42).
I only find one mistake : You should use ToggleButton to keep the state of Button. Say remove image if pressed or set image back when pressed back ( ie. not pressed).
Code in XML :
<ToggleButton icon='./images/ICICI.png' text ='hey' pressed='false' press='handlePress' />
Code in Controller:
handlePress: function(evt) {
var oSource = evt.getSource()
var bPressed = oSource.getPressed();
if(bPressed) {
oSource.setIcon('');
} else {
oSource.setIcon('./images/ICICI.png');
}
}
Let me know if this works for you.
When you use:
var myBtn = sap.ui.getCore().byId("manualimage");
your var myBtn is undefined, because using sap.ui.getCore() id of button is expecting something like:
sap.ui.getCore().byId("__xmlview1--manualimage");
where __xmlview1-- is autogenerated by framework. So please use this code instead:
var myBtn = this.byId("manualimage");
Related
I am relatively new to AEM and I am trying to hide/show dialog fields on checkbox click. I have tried some ways but failed to achieve this functionality. This is just for my own learning. How can I achieve this?
I have tried adding the js clientlib and adding some classes and target to the checkbox and target fields respectively as suggested in other answers but it didn't seem to work. Please help.
First you need to create a clientLibs and add categories as cq.authoring.dialog.all, see the code below:
(function($, $document) {
$document.on("dialog-ready", function() {
Coral.commons.ready($document, function () {
dispalyOrHideTabs();
$(document).on('change', '#showText', function() {
if($('#showText').attr('checked')){
show('1');
}else{
hide('1');
}
});
$(document).on('change', '#showTable', function() {
if($('#showTable').attr('checked')){
show('2');
}else{
hide('2');
}
});
function hide(index){
var tab = $document.find("[id='compareImgId-"+index+"']").closest(".coral3-Panel");
var tab2 = tab.attr("aria-labelledby");
var tab3 = $document.find("[id='"+tab2+"']");
tab3.addClass("hide");
}
function show(index){
var tab = $document.find("[id='compareImgId-"+index+"']").closest(".coral3-Panel");
var tab2 = tab.attr("aria-labelledby");
var tab3 = $document.find("[id='"+tab2+"']");
tab3.removeClass("hide");
}
function dispalyOrHideTabs(){
var editable = Granite.author.DialogFrame.currentDialog.editable;
if(editable){
var node = Granite.HTTP.eval(Granite.author.DialogFrame.currentDialog.editable.path + ".json");
if(node){
var storedTextValue = node.showText;
var storedTableValue = node.showTable;
if(storedTextValue){
show('1');
}else{
hide('1');
}
if(storedTableValue){
show('2');
}else{
hide('2');
}
}
}
}
});
});
})($, $(document));
Add granite:id property as showText of the checkbox resource type.
And below is the dialog tabs which will be hidden and shown:
I have a master-detail splitapp use for phone browser. Master page display the main list and when I click on an item, it will navigate to detail page.
The problem is, from detail page, I click on BackArrow to back to master page and tap again on the same item, onSelect event won't fire > no go anywhere. But if I tap on another item, it works.
In manifest.json, master viewlevel = 1 and detail viewlevel = 2.
Thanks
Below is the detail page navigation button
<Page
title="Title text"
showNavButton="true"
navButtonPress="onNavBack">
onNavBack function
onNavBack: function (oEvent) {
var oHistory = History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
if (sPreviousHash !== undefined) {
window.history.go(-1);
} else {
// no history handle
}}
onSelect to forward
, onSelect : function(oEvent) {
var oTransferData = this.createTransferData(oContext);
this.transferData.setData(oTransferData);
...
this.getRouter().navTo(
"detail", { ZITEM : oTransferData.ZITEM }
);
}
, createTransferData : function(oContext) {
var oData = {};
oData.ZITEM = oContext.getProperty("ZITEM");
}
the list
<List
id="masterList"
noDataText="no data"
mode="SingleSelectMaster"
selectionChange="onSelect"
includeItemInSelection="true"
>
Try itemPress event instead of select (make sure item has "Active" in its type property). It fires whenever you click on item, and select only fires when the selection changes.
You need to clear the list selection
Code
var oList = sap.ui.getCore().byId("masterList");
if(oList)
oList .removeSelections(true);
hey guys not sure if this is a bug or theres something I'm doing wrong, or the CSS style sheets im using are making this error, but im racking my brain on how to fix this.
I have the following code bellow in a loop, ever since I put it in a loop it no longer works as setting the selected button I had a search and some one said try set selected key, I also tried this and no luck. Now I have put them both in and it sets the selected value to neither button. I'll show you screenshots of what I mean. Any ideas on fixing it would be great.
for(var i = 0; i < results.length; i++) {
//Create buttons dynamically
var segmentItemYes = new sap.m.SegmentedButtonItem({text :"Yes", press: [this.onSEYesPress, this]});
var segmentItemNo = new sap.m.SegmentedButtonItem({text :"No", press: [this.onSENoPress, this]});
var segmentedButton = new sap.m.SegmentedButton({items : [segmentItemYes, segmentItemNo]});
//TODO:Doesn't work currently - How do we set default state?
segmentedButton.setSelectedButton(segmentItemNo);
segmentedButton.setSelectedKey(segmentItemNo);
Below is the Image the top part is what I'm getting (I clicked on no to show you what exactly happens. The bottom one is with the setSelectedKey removed but still set to no. any ideas? This is in a JS controller and it gets placed in to an xml fragment if this makes a difference or not.
I got it to work as follows, by binding the selected key to a model:
var segmentItemYes = new sap.m.SegmentedButtonItem( {
text: "Yes",
key: "foo"
});
var segmentItemNo = new sap.m.SegmentedButtonItem( {
text: "No",
key: "bar"
});
var segmentedButton = new sap.m.SegmentedButton( {
items: [segmentItemYes, segmentItemNo],
selectedKey: {
path: "test>/key"
}
});
var model = new sap.ui.model.json.JSONModel({
key: "bar"
});
sap.ui.getCore().setModel(model, "test");
Im using the following code to display simple button,when you click on tab 2 and return to the old tab the button is removed,any idea how do put it permanent in tab1 ?
This is the controller shell
onInit: function() {
this.oViewBuffer ={};
this.oViewBuffer.btn = sap.ui.jsview("codetalk.Main");
var oShell = sap.ui.getCore().byId("main-shell");
oShell.setContent(this.oViewBuffer.btn);
},
onWorksetItemSelected:function(oEvent){
var oShell = sap.ui.getCore().byId("main-shell");
var key = oEvent.getParameter("key");
oShell.setContent(this.oViewBuffer[key]);
}
This is the JS view
createContent : function(oController) {
var oButton = new sap.ui.commons.Button({
text:"Hello Test",
tooltip:"This is toolTip",
press:function(){
alert("test alert");
}
});
return oButton;
}
This is the view of the shell
createContent : function(oController) {
var oButton = new sap.ui.ux3.NavigationItem({
key:"bth",
text:"Tab 1"
});
var oMusicStore = new sap.ui.ux3.NavigationItem({
key:"btn2",
text:"Tab 2"
});
var oShell = new sap.ui.ux3.Shell({
id:"main-shell",
appTitle:"Demo",
worksetItems:[oButton,oMusicStore],
worksetItemSelected:[oController.onWorksetItemSelected,oController]
});
return oShell;
}
first I'd recommend removing the "-" in your shell id (UI5 Dev Guide) and using camel case instead.
secondly you're calling your view with your button in the Init function but once that's done you handle your worksetItems with your controller and set the worksetItem according to your key. So far so good.
But your worksetItems aren't associated with any content so there's no reason for your shell to show you the button when you click on your first Tab
I'd recommend something like initializing your views with IDs and ste the content in your shell controller according to that id
Example:
var oViewButton = sap.ui.view("bth",{
viewName : "codetalk.Main",
type : sap.ui.core.mvc.ViewType.JS
)} //do that in your view where you define your Shell
//do the same for your view with the musicstore also in the view with the Shell
//your id of the view must match the key of your worksetItem
in your shell's controller do this:
onWorksetItemSelected : function(oEvent){
var oShell = sap.ui.getCore().byId("mainShell");
var key = oEvent.getParameter("key");
var oView = sap.ui.getCore().byId(key);
oShell.setContent(oView);
}
this solution will bypass the content aggregation of your Shell but at least it worked for me.
In shell view.js remove second last line
Example
"worksetItemSelected:[oController.onWorksetItemSelected,oController]"
It might work
I am creating an Application that consist of a Panel,
This panel contains a Tab-Panel and a Form-Panel. (Initially, Form-Panel is Hidden)
The Tab-Panel has a Tab, which contains a List.
When Tapped on a List-Item it dose the following
Shows the Form-Panel
Hides the Tab-Panel
My Problem is When it does so , The form do not show any scroll bars, How ever when i change the orientation of the device(iPhone) and then it allows me to scroll.
Can anyone explain me if i am doing it correctly, or is there any better way to achieve this functionality, or can the Main Panle be changed with a view Port ?
A small example will be really great.
Below is my Code (i will try to keep it simple)
Decleration of List and Event Listener
var lstRequestTracker = new Ext.List({
itemTpl : '{emplFirstName} {emplLastName}'
,store : storeRequestTracker
,fullscreen: true
});
lstRequestTracker.on('itemtap', function( oThis, index, item, event) {
var rec = oThis.getStore().getAt(index);
tpnlMyForms.hide();
fpnlOnBoard.show();
//pnlMain.doComponentLayout();
fpnlOnBoard.doComponentLayout();
});
Code for declaring the Main-Panel, Tab-Panel and The Form-Panel
var tpnlMyForms = new Ext.TabPanel({
tabBar : {dock : 'bottom', layout:'hbox'}
,fullscreen : true
,defaults : {scroll: 'vertical', layout:'fit'}
,items : [ {
title : 'Request Tracker'
,items : [lstRequestTracker]
,iconCls: 'time'
}
]
});
var fpnlOnBoard = new Ext.form.FormPanel({Contains form Fields});
Ext.setup({
onReady: function() {
var pnlMain = new Ext.Panel({
fullscreen : true
,dockedItems: [{dock:'top', xtype:'toolbar',title:'STARS'}]
,layout: 'fit'
,items : [tpnlMyForms,fpnlOnBoard]
});
fpnlOnBoard.hide();
}// eo onReady Function
});
Have you tried giving your formPanel a scroll option (scoll: 'horizontal') ? I really don't know wether this will help, but I remember I also had a form a few days ago and this was the solution. That had nothing to do with the device orientation by the way, but who knows..