3

How I can put my icon next to or within the input field? enter image description here

The problem is, the icon changes the form. Usually, it's like this: enter image description here

But when I'm adding the icon (code below), it displaces the Dauer input Field.

Is there a way to make it look clean and that's next to it? Or better in the input field inside?

I can make the button smaller with CSS but there is still a gap between them.. And it does not move automatically.

The best solution is like the Datum above with a small icon inside where I can click or like the icon is next to the Dauer without no gap between input field from Dauer and the ? icon.

PS: I just want it like this (I will decide then later which option is better. But it is possible?) enter image description here

<form:SimpleForm id="neuezeiterfassung"
  editable="true"
  title="Neue Zeiterfassung anlegen"
>
  <Label
    text="Auftrag"
    class="font1"
    tooltip="Auftrag eingeben"
  />
  <l:VerticalLayout>
    <ComboBox id="Auftrag"
      items="{/ZAUFKSet}"
      showSecondaryValues="true"
      width="50%"
    >
      <core:ListItem text="{Aufnr}" />
    </ComboBox>
  </l:VerticalLayout>
  <Label
    text="Datum"
    class="font1"
  />
  <DatePicker id="DP3"
    valueFormat="dd.MM.yyyy"
    displayFormat="medium"
    width="50%"
    placeholder="dd.mm.yyyy"
  />
  <Label class="font1" text="Dauer" />
  <Input id="dauer"
    class="dauer"
    placeholder="Dauer eingeben ... "
    width="50%"
  />
  <HBox class="sapUiSmallMargin">
    <core:Icon
      src="sap-icon://sys-help"
      class="size1" color="#031E48" press="aseads"
    >
      <core:layoutData>
        <FlexItemData growFactor="1" />
      </core:layoutData>
    </core:Icon>
  </HBox>
  <!-- <Button icon="sap-icon://sys-help"  class="myButton"/> -->
  <Label class="font1" text="Arbeitsbeschreibung" />
  <TextArea id="beschreibung" width="50%" />
</form:SimpleForm>
0

3 Answers 3

9

Update: with the change in commit:8f1757d, which is available since UI5 1.84, the value help icon can be changed via valueHelpIconSrc:

<Input showValueHelp="true"
  valueHelpIconSrc="sap-icon://sys-help"
  valueHelpRequest="alert('Help requested')"
/><!-- valueHelpIconSrc available since 1.84.0 -->

No need to extend sap.m.InputBase in this case. Other input controls like sap.m.MaskInput still need to be extended as shown in the linked Plunk below.


Original answer:

The best solution is like the Datum above with a small icon inside where I can click. (...) Is it possible?

Yes, it's possible. Here is a minimal example: https://embed.plnkr.co/EzlF2tkvalJWvSEn

Extended sap.m.InputBase

For this, UI5 provides the API addEndIconapi which is protected, meaning it should be used only when extending sap.m.InputBase!

As an argument for the addEndIcon, you can pass a map of settings that are required to create sap.ui.core.Iconapi, which is highly customizable.

const icon = this.addEndIcon({
  id: this.getId() + "-questionMarkBtn",
  src: IconPool.getIconURI("sys-help"),
  noTabStop: true,
  tooltip: "Information",
  press: [this.onEndButtonPress, this],
}); // See sap.ui.core.Icon/properties for more settings
// icon.addStyleClass(...); if even more customization required..
3

You can achieve it using the below code, just updated the CSS as per your requirement. It is a responsive design, it will work for all the devices.

CODE

<VBox class="sapUiSmallMargin">
        <f:SimpleForm 
                editable="true"
                layout="ResponsiveGridLayout"
                title="Neue Zeiterfassung anlegen"
                labelSpanXL="3"
                labelSpanL="3"
                labelSpanM="3"
                labelSpanS="12"
                adjustLabelSpan="false"
                emptySpanXL="1"
                emptySpanL="1"
                emptySpanM="1"
                emptySpanS="0"
                columnsXL="1"
                columnsL="1"
                columnsM="1"
                singleContainerFullSize="false" >
            <f:content>
                <Label text="Auftrag" tooltip="Auftrag eingeben" />
                <ComboBox items="{/ZAUFKSet}" id="Auftrag" showSecondaryValues="true">
                    <core:ListItem text="{Aufnr}"/>
                </ComboBox>
                <Label text="Datum" labelFor="DP3"/>
                <DatePicker id="DP3" valueFormat="dd.MM.yyyy" displayFormat="medium" placeholder="dd.mm.yyyy"/>
                <Label class="font1" text="Dauer"/>
                <Input value="Street">
                    <layoutData>
                        <l:GridData span="XL7 L7 M7 S10" />
                    </layoutData>
                </Input>
                <Button icon="sap-icon://sys-help"  press="onPress" >
                    <layoutData>
                        <l:GridData span="XL1 L1 M1 S2" />
                    </layoutData>
                </Button>
                <Label text="Arbeitsbeschreibung"/>
                <TextArea id="beschreibung"/>
            </f:content>
        </f:SimpleForm>
    </VBox>

Output:

enter image description here

If you are looking for below output

enter image description here

<f:SimpleForm 
    editable="true"
    layout="ResponsiveGridLayout"
    title="Neue Zeiterfassung anlegen"
    labelSpanXL="3"
    labelSpanL="3"
    labelSpanM="3"
    labelSpanS="12"
    adjustLabelSpan="false"
    emptySpanXL="1"
    emptySpanL="1"
    emptySpanM="1"
    emptySpanS="0"
    columnsXL="1"
    columnsL="1"
    columnsM="1"
    singleContainerFullSize="false" >
    <f:content>
    <Label text="Auftrag" tooltip="Auftrag eingeben" />
      <ComboBox items="{/ZAUFKSet}" id="Auftrag" showSecondaryValues="true">
        <core:ListItem text="{Aufnr}"/>
          <layoutData>
            <l:GridData span="XL8 L8 M7 S9" />
          </layoutData>
      </ComboBox>
        <Label text="Datum" labelFor="DP3"/>
        <DatePicker id="DP3" valueFormat="dd.MM.yyyy" displayFormat="medium" 
         placeholder="dd.mm.yyyy">
         <layoutData>
            <l:GridData span="XL8 L8 M7 S9" />
         </layoutData>
            </DatePicker>
             <Label class="font1" text="Dauer"/>
                <Input value="Street">
        <layoutData>
            <l:GridData span="XL8 L8 M7 S9" />
        </layoutData>
            </Input>
        <Button icon="sap-icon://sys-help"  press="onPress" width="40px" >
        <layoutData>
            <l:GridData span="XL1 L1 M1 S3" />
                </layoutData>
                    </Button>
                    <Label text="Arbeitsbeschreibung"/>
                    <TextArea id="beschreibung">
                        <layoutData>
                            <l:GridData span="XL8 L8 M7 S9" />
                        </layoutData>
                    </TextArea>
                </f:content>
            </f:SimpleForm>

With icon

<VBox class="sapUiSmallMargin">
    <f:SimpleForm 
        editable="true"
        layout="ResponsiveGridLayout"
        title="Neue Zeiterfassung anlegen"
        labelSpanXL="3"
        labelSpanL="3"
        labelSpanM="3"
        labelSpanS="12"
        adjustLabelSpan="false"
        emptySpanXL="1"
        emptySpanL="1"
        emptySpanM="1"
        emptySpanS="0"
        columnsXL="1"
        columnsL="1"
        columnsM="1"
        singleContainerFullSize="false" >
        <f:content>
            <Label text="Auftrag" tooltip="Auftrag eingeben" />
            <ComboBox items="{/ZAUFKSet}" id="Auftrag" showSecondaryValues="true">
                <core:ListItem text="{Aufnr}"/>
                <layoutData>
                    <l:GridData span="XL10 L10 M10 S10" />
                </layoutData>
            </ComboBox>
            <Label text="Datum" labelFor="DP3"/>
            <DatePicker id="DP3" valueFormat="dd.MM.yyyy" displayFormat="medium" placeholder="dd.mm.yyyy">
                <layoutData>
                    <l:GridData span="XL10 L10 M10 S10" />
                </layoutData>
            </DatePicker>
            <Label class="font1" text="Dauer"/>
            <Input value="Street">
                <layoutData>
                    <l:GridData span="XL10 L10 M10 S10" />
                </layoutData>
            </Input>
            <HBox>
                <core:Icon src="sap-icon://sys-help" color="#031E48" press="onPress" class="infoIcon"/>
                <layoutData>
                    <l:GridData span="XL1 L1 M1 S1" />
                </layoutData>
            </HBox>
            <Label text="Arbeitsbeschreibung"/>
            <TextArea id="beschreibung">
                <layoutData>
                    <l:GridData span="XL10 L10 M10 S10" />
                </layoutData>
            </TextArea>
        </f:content>
    </f:SimpleForm>
</VBox>

If you are using the ICON you need to add the style as well for alignment

.infoIcon {
  line-height: 3rem;
}
7
  • THANKS! yeah the smart form thing.. i dont really get.. i try it like you but the thing with labelspanXL and and.. i just dont get it why and when. I done it also with css.. BUUUT it is not really responsive.. i got a icon and make it like this: #__hbox0-cont0_1{ margin-left: -16% !important; } but it is not responsive.. i try a bit around.. dont get it to work. Maybe you know smthing? If i make my windows smaller its move away from where i place it. Mar 10, 2019 at 19:58
  • I am not using smart form, it is SimpleForm only. I am just using the layoutData with l:GridData to achieve the functionality. You can go through the samples and click edit icon. What exactly you are looking for?
    – Inizio
    Mar 11, 2019 at 6:59
  • I have added a new screenshot and updated the code, hope you are look for the same solution.
    – Inizio
    Mar 11, 2019 at 10:35
  • aaah thanks.. i though it is smartform.. i gone try it.. and play around a bit.. maybe you can explain in your own word what labelSpanXl, labelspanL... empty.. and so on does? i dont really get it. because you use the l:GirdData span.. where you set your data.. and i dont really understand it.And also i use <core:Iconinstead of a button but it should work like this. I really appriciate your time and help Mar 11, 2019 at 10:40
  • I have updated my code for Icon as well, kindly check it out. When It comes to labelspanL means - what will be the Labels span for the Large devices. Same applies to XL - Extra Large, M - Medium & S - Small devices. If you have observe the output for different sizes, in small devices the label will be shown in complete row. It is because of labelSpanS="12". Each row will have 12 spans, you are just managing the spans so that the elements should adjust based on the device sizes. So the layout will be responsive.
    – Inizio
    Mar 11, 2019 at 10:58
0

Sometimes extending the InputBase class can be a bit overkill/increase the complexity of the code.

You can also use Flexbox containers to achieve the alignment of the input and the icon.

For example, if you want the input and the icon to be centered vertically and horizontally:

<HBox
    alignItems="Center"
    justifyContent="Center">
    <Input>
        <layoutData>
            <FlexItemData growFactor="3" />
        </layoutData>
    </Input>
    <core:Icon
            src="sap-icon://sys-help">
        <!-- Be careful here with the namespaces (use layoutData from core, not m) -->
        <core:layoutData>
            <FlexItemData growFactor="1" />
        </core:layoutData>
    </core:Icon>
</HBox>

This will give something like this:

example of input and icon alignment

See Flexbox for more examples (API Reference is available at the top of the page).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.