How do I prevent sap.m.popover from closing when the user clicks somewhere else on the page? Is there any solution to this requirement? I was not able to finde anything regarding this in the documentation.
Can someone point me in the right direction, please?
Isnt the property modal what you are looking for?
The popover will not be closed when tapping outside the popover. It also blocks any interaction with the background. The default value is false.
Check the demo kit for the modal property. The Demo-kit is really something you should often use, it could help you a lot.
<Popover title="Test" class="sapUiContentPadding" placement="Bottom" modal="true">
//whatever you want inside your popover
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button
id="close"
text="Close"
press="handlClosePress" />
</Toolbar>
</footer>
</Popover>
Related
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>
I've noticed many apps have settings pages which have controls which behave like buttons, but don't look like buttons.
Anyone know what type of controls these are?
Specifically the one I am tapping on in the linked video file below:
Video example.
It's not a regular control but to do this in Maui you can use the Popup control to replicate a behaviour which is similar to what you just showed
Create a popup as shown here :
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="MyProject.SimplePopup">
<VerticalStackLayout>
<Label Text="This is a very important message!" />
</VerticalStackLayout>
</toolkit:Popup>
Its cs file :
public partial class SimplePopup : Popup
{
public SimplePopup()
{
InitializeComponent();
}
}
And then use Radiobuttons from Maui to achieve the UI you need.
And for that effect use touch effects Its being ported to Maui at the moment though As far as I know (Not sure if works as a compatibility package)
I hope this helps!
It's a picker control, you can get more info here: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/picker
<StackLayout>
<Label Text="Theme"
Margin="0,25,0,5"
FontAttributes="Bold"/>
<Picker x:Name="picker"
Title="Select theme">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Light</x:String>
<x:String>Dark</x:String>
<x:String>Black</x:String>
<x:String>Automatic (device theme)</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
Android:
Android picker example
Windows: Windows picker example
I am trying to make a business critical SAPUI5 application more accessible using screen readers by adding ARIA labels and landmarks. One issue is that some SAPUI5 elements such as sap.m.Title's without text have been used (abused) for layout purposes. I would like to add the aria-hidden attribute or a SAPUI5 analogue to these Title elements. But I can't figure out how to do this. I would like to change
<Title text="" class="title" />
into
<Title aria-hidden="true" text="" class="title" />
But setting aria-hidden on the Title like this seems to be invalid. How would I go about setting a standard HTML attribute on a SAPUI5 control?
Thank you in advance for your help!
Joshua
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.
Is it possible to put sap.m.Text or sap.m.Label in an sap.m.OverflowToolbar so that they can be moved into the overflow area? With buttons, it is possible that the shrank view shows three ellipses and the hidden buttons are accessible with the dropdown. If I use label or text, however, the dropdown won't show.
As of v1.52, any control implementing the interface sap.m.IOverflowToolbarContent can be moved into the the overflow area. One of such controls has been the sap.m.Label since v1.54.
sap.m.Label
interfaces: [
// ...
"sap.m.IOverflowToolbarContent"
],
Demo:
https://openui5.hana.ondemand.com/test-resources/sap/m/OverflowToolbar.html
Also the control, to which the label is pointing via the association labelFor, can be moved into the overflow area too if needed.
Release: 1.30
https://github.com/SAP/openui5/blob/master/src/sap.m/src/sap/m/OverflowToolbarAssociativePopoverControls.js
OverflowToolbarAssociativePopoverControls._mSupportedControls = ...
(Button, OverflowToolbarButton, CheckBox, ToggleButton, Select, ComboBox, SearchField, SegmentedButton, Input, DateTimeInput, RadioButton).
So it's not possible to use text or label by default.
You can add a sap.m.Title Object to the sap.m.OverflowToolbar#content.
Within the sap.m.Title is a property called 'text' where you can assign some text.
The sap.m.Title will automatically be shrinked or disappear if it comes to an overflow. Regarding that it is just text without any related action, there is no need to show the sap.m.Title within the overflow popup.
This refers to the SAP Fiori Gudelines.
https://experience.sap.com/fiori-design/ui-components/table-bar/
Section: Behavior&Interaction --> Overflow (Generic)
"Everything else than a button cannot move into the overflow."
I'm new to sapui5 but maybe this code may be useful for you.
<footer>
<OverflowToolbar >
<ToolbarSpacer/>
<Button type="Accept" text="Accept">
<layoutData><OverflowToolbarLayoutData priority="Low" /></layoutData>
</Button>
<Button type="Reject" text="Reject">
<layoutData><OverflowToolbarLayoutData priority="Low" /></layoutData>
</Button>
<Button type="Accept" text="Accept">
<layoutData><OverflowToolbarLayoutData priority="Low" /></layoutData>
</Button>
<Button type="Reject" text="Reject">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
</OverflowToolbar>
</footer>