Press, hide button in ChartContainerContent in UI5 fiori - sapui5

Hi all SAP UI5 and FIORI positive,
I have ChartContainer with button for graph and button for table. It is defined in xml file as:
<suite:ChartContainerContent id="idButtonChart"
icon = "sap-icon://bar-chart"
title = "Chart"
>
<suite:ChartContainerContent id="idButtonTable"
icon = "sap-icon://table-view"
title = "{i18n>table}">
<suite:content>
Let's say I want to hide some of these buttons which are placed inside ChartContainer. I have tried (in controller.js part):
this.getView().byId("idButtonChart").setVisible(false);
or
this.getView().byId("idButtonChart").setVisible(false);
But this code, hided graph but not button. Please, do you have any idea how to hide button? Or to trigger click event on button idButtonTable?
Thanks for any advices.

Have you found any good solution for this issue? I've been checking the SDK and I can't find a way to get those buttons in an straight way.
Anyway, you could do it using the following code -
var chartContainerContent = this.getView().byId('your chart id');
var chartContainer = chartContainerContent.getParent();
var aToolbarButtons = chartContainer._oToolBar.getContent();
var segmentedButton;
for(var i=0; i<aToolbarButtons.length; i++){
var button = aToolbarButtons[i];
if(button.getMetadata()._sClassName === "sap.m.SegmentedButton"){
segmentedButton = button;
break;
}
}
//segmentedButton.getButtons()
Once you get the buttons you can setVisible(false) to the one you want.
Of course this is not the best, but the chartContainer doesn't provide any public function to get the buttons of the chart.

I try to understand the issue. You define 2 charts in your example.
The buttons are usually used to switch the display to the corresponding chart.
How are you going to switch between the 2 charts if you hide the corresponding button?

A little late but I guess an .updateChartContainer() after the .setVisible should do the trick:
this.getView().byId("idButtonChart").setVisible(false);
this.getView().byId("<NAME OF THE CONTENT CONTAINER>").updateChartContainer();

Related

Ionic show ion-refresher programmatically

i want to display the ion-refresher programmatically. e.g on the first page load i load the data and want to show the ion-refresher. i've not found any build in function only _beginRefresh. this function will fire the refresher, however it will not set the style attribute TOP on the refresher element. therefore it is hidden behind the NAV.
currently i've created a dirty workaround.
let scrollcontent = document.getElementsByClassName('ion-page')[0].getElementsByTagName('ion-content')[0].getElementsByClassName('scroll-content')[0]
let rect = scrollcontent.getBoundingClientRect()
document.getElementById('refresher').style.top = rect.top.toString() + 'px'
this.myRefresher._beginRefresh()
i'm wondering if there is a better aproach.
thanks
ok i've found a better approach...
#ViewChild(Content) ContentDashboard: Content;
this.RefresherDashboard._top = this.ContentDashboard.contentTop.toString() + 'px'
this.RefresherDashboard._beginRefresh()

Enterprise Architect: Hide only "top" labels of connectors programmatically

I want to hide the "top" part of all connector labels of a diagram. For this, I tried to set up a script, but it currently hides ALL labels (also the "bottom" labels which I want to preserve):
// Get a reference to the current diagram
var currentDiagram as EA.Diagram;
currentDiagram = Repository.GetCurrentDiagram();
if (currentDiagram != null)
{
for (var i = 0; i < currentDiagram.DiagramLinks.Count; i++)
{
var currentDiagramLink as EA.DiagramLink;
currentDiagramLink = currentDiagram.DiagramLinks.GetAt(i);
currentDiagramLink.Geometry = currentDiagramLink.Geometry
.replace(/HDN=0/g, "HDN=1")
.replace(/LLT=;/, "LLT=HDN=1;")
.replace(/LRT=;/, "LRT=HDN=1;");
if (!currentDiagramLink.Update())
{
Session.Output(currentDiagramLink.GetLastError());
}
}
}
When I hide only the top labels manually (context menu of a connector/Visibility/Set Label Visibility), the Geometry property of the DiagramLinks remains unchanged, so I guess the detailed label visibility information must be contained somewhere else in the model.
Does anyone know how to change my script?
Thanks in advance!
EDIT:
The dialog for editing the detailed label visibility looks as follows:
My goal is unchecking the "top label" checkboxes programmatically.
In the Geometry attribute you will find a partial string like
LLT=CX=36:CY=13:OX=0:OY=0:HDN=0:BLD=0:ITA=0:UND=0:CLR=-1:ALN=1:DIR=0:ROT=0;
So in between LLT and the next semi-colon you need to locate the HDN=0 and replace that with HDN=1. A simple global change like above wont work. You need a wild card like in the regex LLT=([^;]+); to work correctly.

Menu or MenuButton with separate click handler

I'm looking for a widget like this.
http://ppt.cc/RPfL
Clicking "View" and triangle (drop down icon) need to perform two different functions.
Clicking the triangle opening the menu.
I tried creating 2 buttons to emulate, but the 2 buttons have extra space in between them.
How can I eliminate the space between buttons or, is there a convenient way to accomplish this?
thank you all!!
An IconMenuButton (which is a sub class of IconButton) will provide what you need.
Menu menu = new Menu();
MenuItem newItem = new MenuItem("New");
MenuItem openItem = new MenuItem("Open");
MenuItem saveItem = new MenuItem("Save");
MenuItem saveAsItem = new MenuItem("Save As");
menu.setItems(newItem, openItem, saveItem, saveAsItem);
IconMenuButton menuButton = new IconMenuButton("View", menu);
Also check SmartGWT samples I've given in my comment and RibbonBar sample.

Simple popup or dialog box in Google Apps Script

I'm looking for simple code that adds a popup in my Google Apps Script Ui that comes up when I hit a submit button. The popup box would display a message and have a button to close the popup.
I've looked all over the place - everything seems so complicated and does way more than I need it to do.
This is the current code I have for the submit button.
function doGet() {
var app = UiApp.createApplication();
app.setTitle("My Logbook");
var hPanel_01 = app.createHorizontalPanel();
var vPanel_01 = app.createVerticalPanel();
var vPanel_02 = app.createVerticalPanel();
var vPanel_03 = app.createVerticalPanel();
var submitButton = app.createButton("Submit");
//Create click handler
var clickHandler = app.createServerHandler("submitData");
submitButton.addClickHandler(clickHandler);
clickHandler.addCallbackElement(hPanel_01);
////Test PopUp Panel
var app = UiApp.getActiveApplication();
var app = UiApp.createApplication;
var dialog = app.createDialogBox();
var closeHandler = app.createClientHandler().forTargets(dialog).setVisible(false);
submitButton.addClickHandler(closeHandler);
var button= app.createButton('Close').addClickHandler(closeHandler);
dialog.add(button);
app.add(dialog);
//////
return app;
}
Since UiApp is depreciated, HTMLService should be used to create custom user interfaces.
To prompt simple popup to display a message, use alert method of Ui class
var ui = DocumentApp.getUi();
ui.alert('Hello world');
will prompt simple popup with hello world and an ok button.
To display customized html template in Dialog, use HTMLService to create template and then pass it to showModalDialog method of Ui Class
var html = HtmlService.createHtmlOutput("<div>Hello world</div>").setSandboxMode(HtmlService.SandboxMode.IFRAME);
DocumentApp.getUi().showModalDialog(html, "My Dialog");
HtmlService.createHtmlOutputFromFile allows you to display html that is in a separate file. see the documentation
Have you tried using zIndex? It places the panel above all of your other panels...
var popupPanel = app.createVerticalPanel().setId('popupPanel')
.setVisible(false)
.setStyleAttribute('left', x)
.setStyleAttribute('top', y)
.setStyleAttribute('zIndex', '1')
.setStyleAttribute('position', 'fixed');
x = panel position from the left portion of your app
y = panel position from the top portion of your app
zIndex = the 'layer' your panel will appear on. You can stack panels using '1', '2', '3' etc.
position = your panel will be in a fixed position denoted by (x,y)
Visibility is set to false until you click submit, then have a client handler for your submit button make the popupPanel visible. When you click the button on your popupPanel, have the client handler set visibility to false once again and it will disappear.
One more thing, I noticed you get the active app and then create a new app. You do not need to create a new app...just new panels inside your app.
Hope this helps!
You can use a dialogbox to popup.
Add a button to the dialog-box. Add a client handler that sets the dialog box invisible,once you click the button.
var app = UiApp.createApplication;
var dialog = app.createDialogBox();
var closeHandler = app.createClientHandler().forTargets(dialog).setVisible(false);
var button= app.createButton('Close').addClickHandler(closeHandler);
dialog.add(button);
app.add(dialog);
This should help.
EDIT
Added "()" after .createClientHandler. That should remove issues related to TypeError: Cannot find function createDialogBox in object function createApplication() {/* */}
Popup - use something like this:
var table = app.createFlexTable();
table.setStyleAttribute("position", "absolute");
table.setStyleAttribute("background", "white");
add items to the table and hide and show as needed.

Whats the best way to programatically open a pane inside Dijit AccordionContainer

I am trying open & close accordion panes programatically. Here is the simplified version of my code. Even though I set the first pane's selected to false and and second pane's selected to true, only the first pane opens when it loads on the browser (FF3).
var accordionContainer = new dijit.layout.AccordionContainer().placeAt("test");
var accordPane = new dijit.layout.ContentPane({"title": "test", "content":"hello"});
var accordPane2 = new dijit.layout.ContentPane({"title": "test1", "content":"hello1"});
accordionContainer.addChild(accordPane);
accordionContainer.addChild(accordPane2, 1);
accordPane.startup();
accordPane2.startup();
//accordionContainer.selectChild(accordPane2);
accordionContainer.startup();
accordPane.selected = false;
accordPane2.selected = true;
You can do it like this:
accordionContainer.selectChild( accordPane2 );
Assuming you are using dojo 1.3.
dijit.layout.AccordionContainer is a subclass of dijit.layout.StackContainer, which has selectChild defined.
I set up a demo page where you can see this code in action
If you were calling selectChild before startup, that could cause the error you were seeing since the widget wasn't in a 'complete' state. (Sorry, missed the commneted out code before I posted original answer)