I want set visible property of MenuItem https://openui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.MenuButton/code/MB.view.xml) component but if I write
<items>
<MenuItem text="Edit" icon="sap-icon://edit" visible="true" />
<MenuItem text="Save" icon="sap-icon://save" visible="false" />
<MenuItem text="Open" icon="sap-icon://open-folder" />
</items>
The result is always all three items visible
EDIT:
release1.40.6 fix the bug
But I want use the last long-term maintenance release (1.38.x)... I don't see the fix here
https://openui5.hana.ondemand.com/#releasenotes.html
This is was a bug of the framework (GitHub issue). The fix is now available as of UI5 1.38.8.
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 encountered an UI issue when developing an app using MAUI flyoutItem. According to the official doc, it looks like I can only define the flyoutItem appearance by setting two columns(https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout?view=net-maui-7.0): one bind to FlyoutIcon and the other bind to Title.
What if I want to add a third item such as a label for identity/status or a slide button to enable/disable? I expect sth look like this:
[column 0]FlyoutIcon [column 1]Label1 [column 2]Label2/Slide Button
Can you please also show me some sample code for the solution?
Best and Regards
I tried to modify the Grid to add a third column and addition Label but seems not working.
<Shell ...>
...
<Shell.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="0.2*,0.4*,0.4*">
<Image Source="{Binding FlyoutIcon}"
Margin="5"
HeightRequest="45" />
<Label Grid.Column="1"
Text="{Binding Title}"
FontAttributes="Italic"
VerticalTextAlignment="Center" />
<Label Grid.Column="2"
Text="{Binding Text}"
FontAttributes="Italic"
VerticalTextAlignment="End" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
</Shell>
Er, guys. Looks like using Menu Item instead of FlyoutItem will resolve the issue.
I have a ListView in a dotnet MAUI Windows app with a custom viewcell for the item template. I'd like to control how the focused item is styled. At the moment it becomes grey and has a little blue line on the left edge.
This is the code I am currently using:
<ListView
x:Name="ReportList"
ItemsSource="{Binding Resources}"
SelectedItem="{Binding SelectedResource}"
SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate x:DataType="vm:ReportItemViewModel">
<ViewCell>
<Grid ColumnDefinitions="*, *, *">
<Label Grid.Column="0" Text="{Binding Name}" />
<Label Grid.Column="1" Text="{Binding Size}" />
<Label Grid.Column="2" Text="{Binding Status}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
On the focused element I'd like to remove the blue line and change the background colour.
I've found some promising looking properties and styles while browsing through the default styles in a PR for the MAUI source code.
These properties include:
FocusVisualMargin
FocusVisualPrimaryBrush
FocusVisualPrimaryThickness
FocusVisualSecondaryBrush
I'm not sure how to use them in my code above, or even if these are available in the current release. Can I set these properties, is this the way to go to get complete control over how the focused item is styled, or is there another way?
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.
I have an suite of existing Silverlight applications using the MVVM pattern to separate Views and ViewModels. We use Unity 2.0 for an IoC container to inject dependencies into the ViewModel classes (and supporting types). I have an existing ViewModelLocator class that uses the Unity Container to resolve the ViewModel.
All of this is working great at runtime; however, because the ViewModelLocator relies on the Unity Container being created and configured by a Bootstrapper class that is "Run" from the Application_Start method in App.xaml.cs, I've lost the ability to open the views in the designer or in Blend.
I am looking for suggestions how I can rework the ViewModelLocator to support "Blendability".
Note that I'm not willing to force our ViewModel classes to implement default parameterless constructors just for the sake of Blendability. We also have our ViewModels check the IsInDesignMode property (from the MVVM Light ViewModelBase class) to supply design-time data versus making service calls so we don't have different ViewModel implementations for design-time and run-time.
Let me know what you think.
You want UI elements to have a good design-time experience (including in Blend). That sounds like a reasonable goal.
Let’s look at what a UI element is. For the rest of this answer I’m going to call it a Control. The responsibility of a Control is to render UI and respond to user events. Insofar as it should have behavior, it should only have behavior that relates to UI rendering and user events.
In addition to that, the framework itself (Silverlight as well as WPF) imposes a rule: all Controls must have a default constructor. Furthermore, since the DataContext is a property, it’s optional to assign it.
We should keep encapsulation in mind. Any Control we develop should work nicely within the constraints given above. This means that, apart from having a default constructor, it should also work correctly without a DataContext. In other words, the Blendability experience should be supplied by the Control itself, not any external container that needs to be bootstrapped to assign a DataContext.
When a Control must respond to user events I’ve always found the ICommand interface more than sufficient. Attach ICommands to any applicable event handler in the Control. The ICommands are defined by the View Model, but the beauty of ICommand is that it’s basically a void method which means that it’s trivial to supply a (no-op) Local Default in the case where the DataContext is null. However, that’s rarely necessary, as the Commands aren’t invoked by designers.
Here's an example from my book:
<Window x:Class="Ploeh.Samples.ProductManagement.WpfClient.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Product Management"
Height="300"
Width="300"
MinHeight="300"
MinWidth="300">
<Window.Resources>
<Style x:Key="ProductStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" />
</Style>
</Window.Resources>
<DockPanel FocusManager.FocusedElement="{Binding ElementName=productsListView}">
<Menu DockPanel.Dock="Top">
<MenuItem Header="_File">
<Separator />
<MenuItem Header="E_xit" Command="{Binding Path=CloseCommand}" />
</MenuItem>
<MenuItem Header="_Actions">
<MenuItem Header="_Refresh" InputGestureText="F5" Command="{Binding Path=RefreshCommand}" />
<MenuItem Header="_Add Product" InputGestureText="Ins" Command="{Binding Path=InsertProductCommand}" />
<MenuItem Header="_Edit Product" InputGestureText="Enter" Command="{Binding Path=EditProductCommand}" />
<MenuItem Header="_Delete Product" InputGestureText="Del" Command="{Binding Path=DeleteProductCommand}" />
</MenuItem>
</Menu>
<ToolBarTray DockPanel.Dock="Top" HorizontalAlignment="Stretch">
<ToolBar HorizontalAlignment="Stretch" HorizontalContentAlignment="Left">
<Button Command="{Binding Path=RefreshCommand}">Refresh</Button>
<Button Command="{Binding Path=InsertProductCommand}">Add</Button>
<Button Command="{Binding Path=EditProductCommand}">Edit</Button>
<Button Command="{Binding Path=DeleteProductCommand}">Delete</Button>
</ToolBar>
</ToolBarTray>
<ListView x:Name="productsListView" ItemContainerStyle="{StaticResource ProductStyle}" ItemsSource="{Binding Path=Products}" SelectionMode="Single">
<ListView.View>
<GridView>
<GridViewColumn Header="Id" DisplayMemberBinding="{Binding Path=Id}" />
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Path=Name}" />
<GridViewColumn Header="Price" DisplayMemberBinding="{Binding Path=UnitPrice}" />
</GridView>
</ListView.View>
</ListView>
</DockPanel>
</Window>
and the code-behind:
public partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
}
}