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>
Related
I'm currently using the MS Fluent UI controls (formerly known as Office Fabric UI | https://developer.microsoft.com/en-us/fluentui#/controls/web) and I'm getting stuck with the 'Modal' control.
I am triggering a Modal dialog control as the onClick event for a DocumentCard control. The problem is I can't see any way to keep the new model dialog centred on the screen.
It appears to always center on the element which contains all of the document cards (and there are a lot of cards.. so you end up having to scroll down quite a lot to see the modal dialog).
Is there any way of simply setting it to "center on the (visible) window"?
Below is a snippet from the React Component which hosts the Document Card and Modal dialog..
return (
<DocumentCard onClick={showModal}>
<DocumentCardTitle title={this.props.Title} shouldTruncate />
<Image {...imageProps} className={styles.image} />
<DocumentCardTitle title={this.props.event.Description}
shouldTruncate showAsSecondaryTitle />
<Modal isOpen={isModalOpen} onDismiss={hideModal} isBlocking={true}>
<div>
<span id={titleId}>{this.props.Title}</span>
</div>
<div>
<p>
{this.props.event.Description}
</p>
</div>
</Modal>
</DocumentCard>
);
I think you just need to raise the modal out of the DocumentCard. The following might be what you're looking for
return (
<>
<DocumentCard onClick={showModal}>
<DocumentCardTitle title={this.props.Title} shouldTruncate />
<Image {...imageProps} className={styles.image} />
<DocumentCardTitle title={this.props.event.Description} shouldTruncate showAsSecondaryTitle />
</DocumentCard>
<Modal isOpen={isModalOpen} onDismiss={hideModal} isBlocking={true}>
<div>
<span id={titleId}>{this.props.Title}</span>
</div>
<div>
<p>{this.props.event.Description}</p>
</div>
</Modal>
</>
);
Is there a way to force content behind a disabled button, that is transparent?
Here is the code:
<ion-fab bottom right #fab1>
<button tappable ion-fab color="green" class="no-text-transform" (click)="proximo()" [disabled]="!cultivaresForm.valid">
<ion-icon name="arrow-round-forward"></ion-icon>
<ion-label>Próximo</ion-label>
</button>
</ion-fab>
I'm not quite sure to understand what you want to do here, but if you want to apply a style depending on a particular logic you can use ngClass.
i.e. if you want to apply a style to your text when the button is disabled (so when
!cultivaresForm.valid) you can do something like this:
<ion-fab bottom right #fab1>
<button tappable ion-fab color="green" class="no-text-transform" (click)="proximo()" [disabled]="!cultivaresForm.valid">
<ion-icon name="arrow-round-forward"></ion-icon>
<ion-label>Próximo</ion-label>
</button>
</ion-fab>
<p [ngClass]="{text-behind: !cultivaresForm.valid}">the text you want to put behind</p>
You can then define the text-behind style in a separate CSS file.
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>
How can I set a line break between two controls?
I want to display one by one in vertical manner.
You can use a flex box control: either <VBox> or <HBox>.
<VBox xmlns="sap.m" wrap="Wrap" renderType="Bare">
<!-- ... -->
</VBox>
You don't really use linebreaks but layout controls.
If you want to have an element below another element, put both of them in a vertical layout.
https://sapui5.hana.ondemand.com/explored.html#/entity/sap.ui.layout.VerticalLayout/samples
<l:VerticalLayout>
<Input placeholder="UserID" />
<Input placeholder="Password" type="Password" />
</l:VerticalLayout>
Don't forget to include the namespace: xmlns:l="sap.ui.layout"
You can also nest different layouts: Outer layout is vertical, and each row of the vertical layout can be a horizontal layout where items are placed next to each other.
Edit: This also works in IE9. VBox unfortunately does not work in IE9.
I am using a sap.ui.table.Table control and have added some controls in the 'extension' aggregation. Specifically, I have added a HorizontalLayout that has 2 buttons in it. However, both the buttons show up as left aligned. I tried changing the alignment but nothing seems to get them to show up on the extreme right.
Here is the code snippet:
`<table:Table height="100%" width="100%">
<table:extension>`
<l:HorizontalLayout>
<Button text="Save" />
<Button text="Cancel"/>
</l:HorizontalLayout>
</table:extension>
</table:Table>
A HorizontalLayout will be left-aligned only.
Why not use a MatrixLayout instead with a single cell and set its hALign property to Right?