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
Related
In UI5, I am using ColumnLayout in my form to show a form that has several Form Containers with a bunch of fields on it. It is working fine; when I shrink it, it moves to a single column and looks good. However, when it is on a large screen and goes to 2 columns, the sequence of data is screwed up.
Here is my section of the XML view:
<f:Form xmlns:f="sap.ui.layout.form" editable="true">
<f:layout>
<f:ColumnLayout columnsM="2" columnsL="3" columnsXL="4" />
</f:layout>
<f:formContainers>
<f:FormContainer title="Basic Data">
<f:formElements>
<f:FormElement label="Field 1">
<f:fields>
<Input maxLength="10" />
</f:fields>
</f:FormElement>
<f:FormElement label="Field 2">
<f:fields>
<Input maxLength="100" />
</f:fields>
</f:FormElement>
<f:FormElement label="Field 3">
<f:fields>
<Input maxLength="20" />
</f:fields>
</f:FormElement>
<f:FormElement label="Field 4">
<f:fields>
<Input maxLength="20" />
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
And this is what it looks like now:
with the columns in the following sequence:
Field 1 Field 4
Field 2
Field 3
I understand that it goes in newspaper-like sequence, but is there a way for it to instead show:
Field 1 Field 2
Field 3 Field 4
You'll have to use a different layout in that case. Here is an example with ResponsiveGridLayout: https://jsbin.com/topaleb/edit?js,output
Other screenshots: XL, S
Anyone can help to make the StepInput next to Number of copies:
My Code:
<core:FragmentDefinition xmlns="sap.m" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core">
<Dialog title="{i18n>CopyStructure}" class="sapUiContentPadding" contentWidth="25em"
afterClose=".onAfterCloseForCreateDuplicateHierarchyElement">
<content>
<HBox class="sapUiSmallMargin">
<f:Form editable="true">
<f:layout>
<f:ResponsiveGridLayout labelSpanXL="4" labelSpanL="4" labelSpanM="4" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="3" emptySpanL="3"
emptySpanM="3" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleContainerFullSize="false"/>
</f:layout>
<f:formContainers>
<f:FormContainer>
<f:formElements>
<f:FormElement label="{i18n>NumberOfDuplicateCopies}">
<f:fields>
<StepInput value="{objectView>/numberOfDuplicateCopies}" width="5rem" min="0" max="99" change=".onChangeForNumberOfDuplicates"/>
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
</HBox>
</content>
<beginButton>
<Button text="{i18n>OK}" press=".onPressOkForCreateDuplicateHierarchyElement" enabled="false"/>
</beginButton>
<endButton>
<Button text="{i18n>Cancel}" press=".onPressCancel"/>
</endButton>
</Dialog>
</core:FragmentDefinition>
I have tried to used HBOX/VBOX but it doesnt really works.
Thanks!
The problem is in ResponsiveGridLayout. Try to set its parameters like this:
<f:ResponsiveGridLayout labelSpanXL="4" labelSpanL="4" labelSpanM="4" labelSpanS="4" adjustLabelSpan="false" emptySpanXL="0" emptySpanL="0"
emptySpanM="0" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleContainerFullSize="false"/>
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.
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>