I have an odd issue. Here is a Plunker: https://plnkr.co/edit/x8BKd1zA55I7WQBC0mOu?p=preview
The issue is that the icon on the drop down button does not appear when placing a sap.m.Select within a sap.ui.layout.form.SimpleForm. The Plunker includes the same elements on two different panels (sap.m.Panel) but one of the panels has the elements also within a SimpleForm.
Here is the XML:
<Panel>
<Label text="One" />
<Select>
<core:Item text="Celsius" key="C"></core:Item>
<core:Item text="Fahrenheit" key="F"></core:Item>
</Select>
</Panel>
<Panel>
<forms:SimpleForm layout="ResponsiveGridLayout">
<Label text="One" />
<Select>
<core:Item text="Celsius" key="C"></core:Item>
<core:Item text="Fahrenheit" key="F"></core:Item>
</Select>
</forms:SimpleForm>
</Panel>
Any assistance would be appreciated.
Thank you
Just set simpleform as editable=true
<Panel>
<Label text="One" />
<Select>
<core:Item text="Celsius" key="C"></core:Item>
<core:Item text="Fahrenheit" key="F"></core:Item>
</Select>
</Panel>
<Panel>
<forms:SimpleForm editable="true" layout="ResponsiveGridLayout">
<Label text="One" />
<Select>
<core:Item text="Celsius" key="C"></core:Item>
<core:Item text="Fahrenheit" key="F"></core:Item>
</Select>
</forms:SimpleForm>
</Panel>
Related
I have to make a matrix of radio buttons exactly like the image attached (this is from https://experience.sap.com/fiori-design-web/radio-button/). But only one option selected per line.
Since the image is from the guidelines shouldn't we be able to reproduce it easily? Been trying to work with radio button groups but it doesn't end up looking like this...
Did you try the "groupName" Property?
Name of the radio button group the current radio button belongs to. You can define a new name for the group. If no new name is specified, this radio button belongs to the sapMRbDefaultGroup per default. Default behavior of a radio button in a group is that when one of the radio buttons in a group is selected, all others are unselected.
https://sapui5.hana.ondemand.com/#/api/sap.m.RadioButton%23controlProperties
you can have a look on https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.RadioButtonGroup/sample/sap.m.sample.RadioButtonGroup
You can just create 2 groups and align them. With a bit of predefined css classes i think you would get your result. Or you use groupName but you cant use it with RadioButtonGroup.
Radiogroup with a bit of adjustment from your side:
<FlexBox class="sapUiMediumMarginBeginEnd">
<Label text="Foo" class="sapUiLargeMarginBeginEnd"/>
<Label text="Bar" class="sapUiLargeMarginBegin"/>
</FlexBox>
<HBox class="sapUiTinyMarginTopBottom">
<Label text="selected"/>
<RadioButtonGroup id="rbg3" columns="5" valueState="Error" class="sapUiMediumMarginBottom">
<RadioButton id="RB3-1" text="Option 1" />
<RadioButton id="RB3-2" text="Option 2" />
<RadioButton id="RB3-3" text="Option 3" />
</RadioButtonGroup>
</HBox>
<HBox class="sapUiTinyMarginTopBottom">
<Label text="unselected"/>
<RadioButtonGroup id="rbg4" columns="5" valueState="Error" class="sapUiMediumMarginBottom">
<RadioButton id="RB3-5" text="Option 1" />
<RadioButton id="RB3-6" text="Option 2" />
<RadioButton id="RB3-7" text="Option 3" />
</RadioButtonGroup>
</HBox>
</VBox>
or you can do this with the groupNamewhich i would prefere more, but here also a little adjustment with the flexbox.
<VBox class="sapUiSmallMargin">
<HBox class="sapUiTinyMarginTopBottom">
<FlexBox class="sapUiMediumMargin" direction="Column" alignItems="Start">
<Label text="Selected" />
<Label text="Unselected" class="sapUiTinyMarginTop"/>
</FlexBox>
<VBox class="sapUiMediumMarginEnd">
<Label text="Success" labelFor="groupB" />
<RadioButton text="Option 1" groupName="test1" />
<RadioButton text="Option 2" groupName="test2" />
</VBox>
<VBox class="sapUiMediumMarginEnd">
<Label text="Error" labelFor="groupC" />
<RadioButton text="Option 1" groupName="test1" />
<RadioButton text="Option 2" groupName="test2" />
</VBox>
<VBox class="sapUiMediumMarginEnd">
<Label text="Warning" labelFor="groupD" />
<RadioButton text="Option 1" groupName="test1" />
<RadioButton text="Option 2" groupName="test2" />
</VBox>
<VBox class="sapUiMediumMarginEnd">
<Label text="Information" labelFor="groupE" />
<RadioButton text="Option 1" groupName="test1" />
<RadioButton text="Option 2" groupName="test2" />
</VBox>
</HBox>
</VBox>
Ended up just using a sap.m.Table and for the content used sap.m.Text and sap.m.RadioButton. Also important to use groupName to distinguish the two radio button lines.
`
<mvc:View
controllerName="HelloWorld.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page title="My App"/>
<Table id="idProductsTable">
<columns>
<Column>
<Text
text="" />
</Column>
<Column
hAlign="Center">
<Text text="Low"/>
</Column>
<Column
hAlign="Center">
<Text text="Medium" />
</Column>
<Column
hAlign="Center">
<Text text="High" />
</Column>
</columns>
<items>
<ColumnListItem vAlign="Middle">
<cells>
<Text
text="First Line" />
<RadioButton
groupName="1"/>
<RadioButton
groupName="1"/>
<RadioButton
groupName="1"/>
</cells>
</ColumnListItem>
<ColumnListItem vAlign="Middle">
<cells>
<Text
text="Second Line" />
<RadioButton
groupName="2"/>
<RadioButton
groupName="2"/>
<RadioButton
groupName="2"/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
`
I cant seem to find a way to put the <DatePicker id="DP1" placeholder="Enter Date" value="{/recipient2/name}" change="handleChange" class="sapUiSmallMarginBottom"/> and <Select selectedKey="{/recipient3/name}" id="input-c" forceSelection="false">
in new line. They show at the same line but I would like them in two different lines.
<mvc:View controllerName="Workspace.controller.App" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form">
<Page title="{i18n>homePageTitle}">
<content>
<Panel width="auto" class="sapUiResponsiveMargin">
<Image src="https://www.enggwave.com/wp-content/uploads/2016/11/Sopra-Steria-Logo.png" width="100px" height="100px"
class="sapUiResponsiveMargin"></Image>
<Text text="Plot No. 20 21 Seaview Special Economic Zone"/>
<Image src="https://upload.wikimedia.org/wikipedia/en/thumb/0/02/Sopra_Steria_logo.svg/1280px-Sopra_Steria_logo.svg.png" width="500px"
height="100px" class="sapUiResponsiveMargin"></Image>
</Panel>
<Panel>
<f:SimpleForm id="SimpleFormChange354" width="100%" minWidth="1024" maxContainerCols="2" editable="true" layout="ResponsiveGridLayout"
title="FORM" labelSpanL="3" labelSpanM="3" emptySpanL="4" emptySpanM="4" columnsL="1" columnsM="1" class="editableForm">
<f:content>
<Label text="NAME : " labelFor="input-a" design="Bold"/>
<Input id="input-a" placeholder="Enter Name" value="{/recipient1/name}" valueLiveUpdate="true" width="100%" required="true"/>
<Label text="DATE : " labelFor="input-b" design="Bold"/>
<DatePicker id="DP1" placeholder="Enter Date" value="{/recipient2/name}" change="handleChange" class="sapUiSmallMarginBottom"/>
<InputListItem label="Country" >
<Select selectedKey="{/recipient3/name}" id="input-c" forceSelection="false">
<core:Item key="Greece" text="Greece"/>
<core:Item key="Mexico" text="Mexico"/>
<core:Item key="Norway" text="Norway"/>
<core:Item key="New Zealand" text="New Zealand"/>
<core:Item key="Netherlands" text="Netherlands"/>
</Select>
</InputListItem>
<Button text="{i18n>showHelloButtonText}" press="onShowHello"/>
</f:content>
</f:SimpleForm>
</Panel>
</content>
</Page>
</mvc:View>
Try putting the two in a Vbox
<Vbox>
<DatePicker id="DP1" placeholder="Enter Date" value="{/recipient2/name}"
change="handleChange" class="sapUiSmallMarginBottom"/>
<InputListItem label="Country" >
<Select selectedKey="{/recipient3/name}" id="input-c"
forceSelection="false">
<core:Item key="Greece" text="Greece"/>
<core:Item key="Mexico" text="Mexico"/>
<core:Item key="Norway" text="Norway"/>
<core:Item key="New Zealand" text="New Zealand"/>
<core:Item key="Netherlands" text="Netherlands"/>
</Select>
</InputListItem>
<Button text="{i18n>showHelloButtonText}" press="onShowHello"/>
</Vbox>
I am trying to render StandardTile in a Grid, but due to some reason it's not working. however, it works when I remove the Grid & Panel from my code.
Can anyone point out what exactly am I doing wrong here?
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns="sap.m"
controllerName="hanaDashBoard.controller.Home">
<Page showHeader="false" enableScrolling="false">
<Toolbar class="sapUiTinyMarginTop" id="toolbar1" height="10%">
<ComboBox id="SidCombo" width="11.5%" showSecondaryValues="true"
items="{
path: '/results'
}" selectionChange="SidSelect">
<core:ListItem key='{Key}' text='{Sid}'
additionalText='{Template}' />
</ComboBox>
<Text id="TemplateText"></Text>
<Text id="SltText"></Text>
<ToolbarSpacer />
<Button id="UserName" icon="sap-icon://kpi-managing-my-area"
enabled="false" type="Transparent" />
</Toolbar>
<l:Grid
id="leGrid"
class="sapUiSmallMarginTop"
hSpacing="2"
visible="false"
>
<l:content>
<Panel width="auto" class="sapUiResponsiveMargin">
<content>
<TileContainer id="container"
width="100%" height="100%" visible="true" tileDelete="handleTileDelete"
tiles="{/TileCollection}">
<StandardTile icon="{icon}" type="{type}" number="{number}"
numberUnit="{numberUnit}" title="{title}" info="{info}"
infoState="{infoState}" press="handleTilepress" />
</TileContainer>
</content>
<layoutData>
<l:GridData span="L12 M12 S12" />
</layoutData>
</Panel>
</l:content>
</l:Grid>
<footer>
<Toolbar>
<ToolbarSpacer />
<Button id="editbutton" text="Edit" press="tilePressed" />
<ToolbarSpacer />
</Toolbar>
</footer>
</Page>
</mvc:View>
I'm currently working on a page that is made with openui5, what I need to do is to insert a captcha, but as far as I know there is no captcha in openui5, what I was trying is to insert HTML content into this.
The problem is, my views are in XML and I did try to insert directly using tags and changing the content, but wasn't possible, it says incorrect xml parsing.
Part of my code of where I want to input my html div:
<Page id="page1" class="marginBoxContent" showHeader="false" showFooter="false" enableScrolling="true">
<content>
<Image src="../../image/logo.svg" />
<l:Grid
defaultSpan="L12 M12 S12"
width="100%">
<l:content>
<f:Form id="FormChange354"
minWidth="1024"
maxContainerCols="2"
editable="true">
<f:layout>
<f:ResponsiveGridLayout
labelSpanL="3"
labelSpanM="3"
emptySpanL="4"
emptySpanM="4"
columnsL="1"
columnsM="1" />
</f:layout>
<f:formContainers>
<f:FormContainer>
<f:formElements>
<f:FormElement label="{i18n>Language}">
<f:fields>
<Select id="animationSelect" selectedKey="en" change="languageChange">
<core:Item text="English" key="en" />
<core:Item text="Português" key="pt" />
<core:Item text="Español" key="es" />
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</Select>
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
<f:FormElement label="{i18n>User}">
<f:fields>
<Input id="username" value="" type="Email" />
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
<f:FormElement label="{i18n>Password}">
<f:fields>
<Input id="password" type="Password" placeholder="" value="" />
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
<f:FormElement label="">
<f:fields>
<Button id="btnLogin" text="{i18n>Sigin}" type="Emphasized" press="login" />
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
<l:VerticalLayout>
<Link text="{i18n>CreateUser}" press="navCreateUser" />
<Link text="{i18n>RecoverPass}" press="navRecoverPass" />
<Link text="{i18n>ChangePass}" press="navChangePass" />
</l:VerticalLayout>
</l:content>
</l:Grid>
</content>
I want to insert exaclty here:
<f:formElements>
<f:FormElement label="">
<f:fields>
<Button id="btnLogin" text="{i18n>Sigin}" type="Emphasized" press="login" />
</f:fields>
</f:FormElement>
</f:formElements>
Inside the fields xml or before, because the captcha will appear above the login button.
The content of the div I want to insert is from google captcha:
<div id='recaptcha' class="g-recaptcha"
data-sitekey="your_site_key"
data-callback="onSubmit"
data-size="invisible"></div>
Couldn't have success yet, anybody can help me with that?
Maybe is something about the namespace, I don't know, here is my namespace config:
<mvc:View
height="100%"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core"
controllerName="hiddenName.app.login.view.Login">
Thanks a lot for your time!
thank you for every help. I got some help from all comments, what I did was declare the namespace to html:
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core"
xmlns:html="http://www.w3.org/1999/xhtml"
height="100%"
controllerName="hiddenName.app.login.view.Login"
>
And simply added the tag as I show down here:
<html:div id="recaptchaGoogle" class="g-recaptcha" data-sitekey="yourKey"></html:div>
Also remember to declare the import of the google js(added it on my index):
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
I'm still trying to figure out how to get this captcha answer and pass or not to the login.
With that, the captcha appears and is generated.
Thank you!
To insert HTML in a XML view you could use the HTML control from the sap.ui.core library. You will have to escape the HTML text before using it in XML.
<core:HTML content='<div id="recaptcha" class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit" data-size="invisible"></div>' />
I am trying to fill select items from odata service. I used the odata service in a list just to test it and it works, no problems. But when i set the data to Select i get "invalid XML" error.
Here is my xml view :
<mvc:View controllerName="packdialogue.controller.s1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns="sap.m"
xmlns:l="sap.ui.layout">
<App id="s1">
<pages>
<Page title="{i18n>title}" id="s1page" >
<content>
<FlexBox
alignContent="Center"
justifyContent="Center"
width="auto"
>
<Panel
class="s1Panel"
backgroundDesign="Solid" >
<l:VerticalLayout>
<Text
textAlign="Center"
id="S1LgnumLabel"
visible="true"
text="{i18n>S1LgnumLabel}"
width="18em">
</Text>
<Input
class="s1Input"
id="S1LgnumInput"
enabled="true"
width="18em">
</Input>
<Button
id="S1EnterButton"
text="{i18n>S1Button1Text}"
width="21.5em"
press="onEnterPressed"
>
</Button>
<Text
textAlign="Center"
id="S1WSLabel"
visible="false"
text="{i18n>S1WSLabel}"
width="18em">
</Text>
<Button
id="S1NextButton"
press="onS1ButtonPressed"
text="{i18n>S1Button2Text}"
width="21.5em"
enabled="false"
visible="false"
>
</Button>
<Select
items="{test>/WorkcenterSet}">
<items>
<core:Item key="{test>wrkst}" text="{test>wrkst}" />
</items>
</Select>
<List
id="S1List"
visible="false"
items="{test>/WorkcenterSet}"
>
<StandardListItem
title="{test>wrkst}"
iconDensityAware="false"
iconInset="false" />
</List>
</l:VerticalLayout>
</Panel>
</FlexBox>
</content>
</Page>
</pages>
</App>
When i delete the Select from my View I get no errors so the problem is in the select, but I can't figure out what is wrong with my code.
You forgot to add core namespace into the view header:
xmlns:core="sap.ui.core"
So, when it comes to it does not know what to do.
I believe you should define core namespace in the XML for <core:Item key="{test>wrkst}" text="{test>wrkst}" />
<mvc:View controllerName="packdialogue.controller.s1"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:l="sap.ui.layout">