How we can click on buttons which is inside in Process Flow control in SAPUI5? - sapui5

I have added two buttons(Approve, Reject) in Process Flow node. But I am not able to click on that buttons.
Can anyone help on this, How we can click on that buttons?
sap.suite.ui.commons.sample.ProcessFlow
ProcessFlow
Code
<ProcessFlow id="processflow1" scrollable="false" nodePress="onNodePress" foldedCorners="true" nodes="{/nodes}" lanes="{/lanes}">
<nodes>
<ProcessFlowNode id="processflownode1" laneId="{lane}" nodeId="{id}"
title="{title}" titleAbbreviation="{titleAbbreviation}"
children="{children}" state="Neutral" stateText="{stateText}"
texts="{texts}" focused="false" selected="false"
highlighted="false" isTitleClickable="false">
<zoomLevelOneContent>
<m:HBox height="100%" justifyContent="SpaceBetween" renderType="Bare">
<m:Button type="Accept" text="Approve" press="onPress"></m:Button>
<m:Button text="Reject" type="Reject"/>
</m:HBox>
</zoomLevelOneContent>
</ProcessFlowNode>
</nodes>
<lanes>
<ProcessFlowLaneHeader laneId="{id}" iconSrc="{icon}" text="{label}" position="{position}"/>
</lanes>
</ProcessFlow>
Screenshot

This feature is not possible with ProcessFlowNode. You can use nodePress event to open an action sheet or popover for your actions according to your need.
For more information please check:
Process Flow | SAP Fiori Design Guidelines

Related

How to implement custom icon in SAPUI5's Shellbar Control?

I implemented a functionality so that the users of my SAPUI5 application can change between different SAPUI5 themes. Now I would like to place a button in the existing ShellBar of my app to trigger that functionality from there.
Currently I have a fragment with the following code, which I want to make use of within a simple button in the ShellBar. I tried different things like f.ex. calling it via the avaterPressed attribute from the shellbar, but it looks all messed up - I'd be very happy if someone could help me out here - Thanks!
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Menu itemSelected="onSelectTheme" >
<MenuItem text="Choose Theme">
<items>
<MenuItem key="sap_fiori_3" text="Standard Light" />
<MenuItem key="sap_fiori_3_dark" text="Standard Dark" />
<MenuItem key="sap_hcw" text="High Contrast White" />
<MenuItem key="sap_hcb" text="High Contrast Black" />
</items>
</MenuItem>
</Menu>
</core:FragmentDefinition>
It should look like the "Administrator" button in the following example (Instead of "User Settings" there should be my text "Choose Theme" from the fragment shown above: https://sapui5.hana.ondemand.com/sdk/test-resources/sap/tnt/demokit/toolpageapp/webapp/index.html?sap-ui-theme=sap_horizon#/
If you want to keep using the ShellBar, you can implement the press event on the Avatar and use the ActionSheet for your needs.
https://sapui5.hana.ondemand.com/#/entity/sap.m.ActionSheet/sample/sap.m.sample.ActionSheet
The developers from the linked example don't use the SAPUI5 Control ShellBar, but instead they made use of ToolHeader, which you can also implement within the Control ToolPage.
With ToolHeader, you can simply add a Button wherever you'd like and also call the fragment from f.ex. the profile picture button (shown below).
<tnt:ToolHeader>
<Avatar src="..." press="YOUR_FUNCTION_TO_OPEN_FRAGMENT"/>
</tnt:ToolHeader>

How to disable (make inactive/grey out) File button in MS Office document

I try to disable File button in MS Word.
example
I know that we can disable backstage using customUI.xml:
<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
<backstage>
<button idMso="FileSave" visible="false"/>
<button idMso="FileSaveAs" visible="false"/>
<button idMso="FileOpen" visible="false"/>
<button idMso="FileClose" visible="false"/>
<button idMso="ApplicationOptionsDialog" visible="false"/>
...
</backstage>
</customUI>
But i need to fully disable button. User should have no abilities even click it. I must hide backstage from users. I saw similar question. This has 1 answer which says
It's not possible to hide this button
Also, Edraw library has such possibility link. Someone has any thought?
Hiding the File tab requires you to hide the default ribbon:
<CustomUI xmlns="http://schemas.microsoft.com/office/2009/07/CustomUI"> <ribbon startFromScratch="true"/></CustomUI>
Then replace it with a new ribbon that you design from scratch.

SAP UI5 - Card - How to trigger a onclick over the card control which should lead to opening of a list control

I have an issue with the Card (sap.f), i have some content on the first half of the card and i want to press the card and able to withdraw a list which i am not able to attain via Navigation List.
Please suggest which list control should be able to perform this.
<f:Card id="card">
<f:layoutData>
<f:GridContainerItemLayoutData columns="4"/>
</f:layoutData>
<f:content>
..........
<CustomListItem type="Active"
press="onShowHideMenuPress">
........ There are some items here
<List id="list" visible="false"
class="sapUiTinyMarginBegin
sapUiNoContentPadding">
</List>
</CustomListItem>
</f:content>
</f:Card>
Then in the controller the function()
onShowHideMenuPress: function()
{
this.getView().byId("list").setVisible(true);
}

Error While Creating a Dialog Box Using XML Fragments

I am getting the below error while trying to display a dialog box after user presses a button,
sap-ui-core.js:80 Uncaught Error: failed to load 'sap/m/buttons.js' from resources/sap/m/buttons.js: 404 - Resource could not be found!
Please find the XML code below.
<Dialog xmlns="sap.m"
icon="sap.icon://filter"
title="Filter product details">
<content>
<List id="ls2"
items="{/value}"
mode="MultiSelect">
<StandardListItem title="{CompanyName}"/>
</List>
</content>
<buttons>
<Button text="ok" icon="sap-icon://accept" press="handleok"/>
<Button text="Cancel" icon="sap.icon://cancel"/>
</buttons>
</Dialog>
So the issue was that the UI5 version was quite outdated after all. The aggregation buttons was introduced as of version 1.21.1.
You have to wrap the sap.m.Dialog control inside a FragmentDefinition according to the walkthrough guide.
Here is minimal example https://embed.plnkr.co/OjUCXTg2afohZyDvPp67/
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Dialog
id="helloDialog"
title="Hello World">
<buttons>
<Button text="Ok">
<Button text="Cancel">
</buttons>
</Dialog>
</core:FragmentDefinition>
And instead of using a dialog control you can use a sap.m.MessageBox control which provides you with "Ok" and "Cancel" or custom buttons.

SAPUI5: Suggestions required to outline my webapplication which display an online Questionnaire?

I am new to SAPUI5, I need suggestions understanding outline a Web App.
I am trying to develop an Online Questionnaire which will display questions and options and user can navigate to different questions with next and previous buttons.
Here is what I was thinking while designing:
I would first use a Page Control which will have a header that displays a Title and a footer which will contain Next and Previous buttons.
The Page will have Content which will then consist of VBOX and HBOX
for holding questions and answers.
Inside this VBOX and HBOX I will bind the text coming from my Json model or from my SAP HANA database.
Is it possible to bind values to HBOX and VBOX?
Kindly suggest more like should I use a different layout for this or some other idea.
Your suggestion is ok. You can also use for example this approach.
<mvc:View
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<l:VerticalLayout
class="sapUiContentPadding"
width="100%">
<l:content>
<Label text="Label A (required)" labelFor="input-a"/>
<Input id="input-a" required="true"/>
<Label text="Label B (bold)" labelFor="input-b" design="Bold" />
<Input id="input-b"/>
<Label text="Label C (normal)" labelFor="input-c"/>
<Input id="input-c"/>
</l:content>
</l:VerticalLayout>
</mvc:View>