Mockup
Current Code
<mvc:View
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
displayBlock="true" height="100%">
<Page showHeader="false" id="page">
<content>
<l:Grid defaultSpan="L12 M12 S12" width="auto">
<l:content>
<f:Form editable="true">
<f:title>
<core:Title text="Test" />
</f:title>
<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="Name">
<f:fields>
<Input id="name1" value="" />
</f:fields>
</f:FormElement>
<f:FormElement label="Name">
<f:fields>
<Input id="name2" value="" />
</f:fields>
</f:FormElement>
<f:FormElement>
<f:fields>
<CheckBox id="cb1" />
<Text wrapping="true" text="lorem ipsum" />
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
</l:content>
</l:Grid>
</content>
</Page>
</mvc:View>
Problem
The checkbox is not centered. The current code is responsive and the solution should also be responsive.
If you want the checkbox to be centered you need to use a label on your formElement just as you do with the others. If you don't want a label you will probably need some css to put a left-margin on that specific FormElement.
There is maybe another way more "polite" to do that, but if it exists I do not know it, will keep looking at that post to see if someone actually offers a better solution.
But for now, I hope this works for you for the moment.
Related
I have the following simple form:
<Page title="{i18n>authorization}">
<content>
<VBox>
<f:SimpleForm id="registration" editable="true" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12"
adjustLabelSpan="true" emptySpanXL="3" emptySpanL="3" emptySpanM="3" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
singleContainerFullSize="true">
<f:content>
<Label text=""/>
<Text text="{i18n>userAuthorize}"/>
<Label text=""/>
<Input placeholder="Enter your email address" id="email" type="Email" value="{confirm>/email}" liveChange="onHandleLiveChangeEmail"/>
<Label text=""/>
<Button type="Accept" enabled="{confirm>/enable}" text="{i18n>confirm}" press="handlePressAuthorization"
ariaDescribedBy="acceptButtonDescription genericButtonDescription">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Button>
</f:content>
</f:SimpleForm>
</VBox>
</content>
</Page>
and on the large screen, it stretches too width. What I would like that the simple form should take 4 columns width and place in the middle of screen.
How can I do it?
Try giving your VBox control a specific width. That way the SimpleForm will only fit that. In the VBox you can also add the alignItems="Center" attribute.
If you want to center controls and also not to the full width of the screen, you can do the following:
<VBox width="100%" alignItems="Center">
<VBox width="50%" alignItems="Start">
<!-- Content goes here... -->
</VBox>
</VBox>
This way your controls will be centered and also only stretched to the width of the inner 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 want to have a layout which has a fixed size panel with a form at the top and a panel with a grid which takes the remaining space at the bottom. I have managed that the panels have the correct size - so the section html tag of the grid's panel has 100% and correctly spans but the height of the nested div for the content is calculated to 0px.
What definition is necessary or missing so that the grid takes the complete remaining space?
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:t="sap.ui.table"
height="100%">
<l:FixFlex class="fixFlexFixedSize" fixContentSize="100px">
<l:fixContent>
<Panel class="sapUiNoContentPadding">
<headerToolbar>
<Toolbar>
<Title text="Form" level="H2" />
</Toolbar>
</headerToolbar>
<content>
<f:Form editable="true">
<f:layout>
<f:ResponsiveGridLayout
labelSpanL="2"
labelSpanM="2"
emptySpanL="1"
emptySpanM="1"
columnsL="2"
columnsM="2" />
</f:layout>
<f:formContainers>
<f:FormContainer>
<f:formElements>
<f:FormElement label="Lastname">
<f:fields>
<Input id="lastname" />
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
<f:FormContainer>
<f:FormElement label="Firstname">
<f:fields>
<Input id="firstname" />
</f:fields>
</f:FormElement>
</f:FormContainer>
</f:formContainers>
</f:Form>
</content>
</Panel>
</l:fixContent>
<l:flexContent>
<Panel height="100%" class="sapUiNoContentPadding">
<headerToolbar>
<Toolbar>
<Title text="Grid" level="H2" />
<ToolbarSpacer />
<Button icon="sap-icon://add" text="new" press="newEntry" />
</Toolbar>
</headerToolbar>
<content>
<t:Table
rows="{entries>/result}"
enableSelectAll="false"
selectionMode="None"
visibleRowCountMode="Auto"
height="100%">
<t:columns>
<t:Column width="5rem" >
<Label text="{i18n>entrieslist.column.name}" />
<t:template>
<Link text="{entries>lastname}" press="showDetailsPage"/>
</t:template>
</t:Column>
<t:Column width="5rem" >
<t:template>
<Text text="{entries>firstname}" />
</t:template>
</t:Column>
<t:Column width="11rem" sorted="true" sortProperty="{entries>telephone} ">
<Label text="{i18n>entrieslist.column.number}" />
<t:template>
<Text text="{entries>telephone}" />
</t:template>
</t:Column>
<t:Column width="11rem" >
<Label text="{i18n>entrieslist.column.street}" />
<t:template>
<Text text="{entries>street}" />
</t:template>
</t:Column>
</t:columns>
</t:Table>
</content>
</Panel>
</l:flexContent>
</l:FixFlex>
</mvc:View>
I have this form on an XML view.
I simply want to add a form of two formElements:
<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="Codice Articolo">
<f:fields>
<Text xmlns="sap.m" id="idCodArt" text="codice_articolo_prova"/>
</f:fields>
</f:FormElement>
<f:FormElement label="Codice Nome Doganale">
<f:fields>
<Text xmlns="sap.m" id="idCodNomDog" text="codice_doganale_prova"/>
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
Why is the output this...? :/
Is this a problem of the first part of form declaration?
It's a bug!
Until it is corrected, use an Input and set editable="false".
See here: http://jsbin.com/bokavisu/1/edit