es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Formulario con 2 campos en la misma línea en SAPUI5.

01 Aug, 2023 Programación

Estoy creando un formulario en sapui5 y tengo que colocar varios campos, para que no se vuelva muy largo quiero poner varios campos juntos horizontalmente pero no veo ninguna manera de hacerlo, es decir, he visto dos campos de entrada juntos horizontalmente pero no con un texto descriptivo para cada uno. Lo que quiero es lo que se muestra en la siguiente imagen

Imagen de ejemplo

Esto es lo que tengo:

<f:form id="FormChange354" editable="true">
    <f:layout>
        <f:responsivegridlayout labelspanxl="3" labelspanl="3" labelspanm="3" labelspans="12" adjustlabelspan="false" emptyspanxl="4" emptyspanl="4" emptyspanm="4" emptyspans="0" columnsxl="1" columnsl="1" columnsm="1" singlecontainerfullsize="false"></f:responsivegridlayout>
    </f:layout>
    <f:formcontainers>
        <f:formcontainer>
            <f:formelements>
                <f:formelement label="{i18n>Nombre}">
                    <f:fields>
                        <input value="{SupplierName}" id="name">
                    </f:fields>
                </f:formelement>
                <f:formelement label="{i18n>Apellido1}">
                    <f:fields>
                        <input value="{Apellido1}">
                    </f:fields>
                </f:formelement>
                <f:formelement label="{i18n>Apellido2}">
                    <f:fields>
                        <input value="{Apellido2}">
                    </f:fields>
                </f:formelement>
            </f:formelements>
        </f:formcontainer>
    </f:formcontainers>
</f:form>
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el diseño deseado, puedes usar el control Grid de SAPUI5 junto con Labels para agrupar tus campos.

    Aquí tienes un ejemplo de código para lograr este diseño:

    <f:form editable="true">
  <f:formcontainers>
    <f:formcontainer>
      <f:formelements>
        <f:formelement>
          <label text="Información Personal"></label>
          <mvc:view>
            <l:grid defaultspan="L12 M12 S12">
              <l:content>
                <l:horizontallayout>
                  <label text="Nombre"></label>
                  <input value="{firstName}">
                </l:horizontallayout>
                <l:horizontallayout>
                  <label text="Apellido"></label>
                  <input value="{lastName}">
                </l:horizontallayout>
                <l:horizontallayout>
                  <label text="Correo Electrónico"></label>
                  <input value="{email}">
                </l:horizontallayout>
              </l:content>
            </l:grid>
        </mvc:view></f:formelement>
      </f:formelements>
    </f:formcontainer>
  </f:formcontainers>
</f:form>

    En este ejemplo, usamos el control Grid para agrupar los campos de forma horizontal, y el control Label para describir cada campo.

    Ten en cuenta que usamos HorizontalLayouts para agrupar cada par Label-Input en una fila de la grilla.

    Puedes ajustar el valor defaultSpan del control Grid para cambiar el ancho de cada fila de la grilla, y ajustar los controles de etiqueta e input según sea necesario para que coincidan con el diseño deseado.

Comments are closed.