Render input fields on SimpleForm dynamically, loop on input field

[jmandap]

Hi Experts,

I am having trouble on rendering question list data with yes or no radio field or switch field on my Form, data are coming from OData service. So the input fields that I need are in the service, my problem is how can I render it on simpleForm, other personal information are manually added on simpleForm , below the form I need to render the questions, but the problem is I don't know how to loop it, I tried using List but it affects the responsiveness and layout of the form.

Here is the form:
The blue box indicates the manually added input fields for personal data.
The yellow box is a sample question that I manually added, this is my problem, I cannot loop it with the same format of the form.
The red box is a sample, I tried using List to loop the questions, but as you can see it has a different rendering or layout.

I am a newbie of using SAPUI5 please help me.
Any possible solution would be accepted gratefully.
Thanks & Regards,
Jocel Mandap

[Margot]

Can you share you code how you try to loop these fields? I believe this would help to understand what you actually want to achieve (and what went wrong with your current approach).

[jmandap]

• The data will be coming from OData service
• As you can see on the above screen shot, I tried to loop it using list but it affects the layout of the simpleForm
• I am using xml view to render the view

[jmandap]

Hi Margot,

Here is the code, as you can see I tried using List , but I don't want it because it is affecting the layout, it must follow the layout of the simpleForm.

<mvc:View
    controllerName="demo.musterdrill.controller.Assessment"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:form="sap.ui.layout.form"
    xmlns:core="sap.ui.core"
    displayBlock="true"
    height="100%"
    busyIndicatorDelay="0"
>
    <Page
        id="assessmentPage" 
        title="Instruction Assessment"
        showNavButton="true"
        navButtonPress=".onNavBack"
    >
        <content>
            <form:SimpleForm 
                id="assessmentForm"
                title="Instruction #{oGeneralData>/instructionNo}"
                layout="ResponsiveGridLayout"
                editable="true"
                class="sapUiResponsiveMargin"
                width="auto"
                labelSpanL="3" labelSpanM="3"
                emptySpanL="4" emptySpanM="4"
                columnsL="1" columnsM="1">

                <form:content>
                    <Label 
                        labelFor="cmId"
                        required="true"
                        text="{i18n>afCmId}" />
                    <Input
                        id="cmId"
                        type="Number"
                        placeholder="{i18n>afCmIdPlaceHolder}"/>
                    <Label 
                        labelFor="cmENum"
                        required="true"
                        text="{i18n>afECmNo}" />
                    <Input
                        id="cmENum"
                        type="Number"/>
                    <Label 
                        labelFor="cmDepartment"
                        required="true"
                        text="{i18n>afCmDepartment}" />
                    <Input
                        id="cmDepartment"
                        type="Text"/>
                    <Label 
                        labelFor="cmTitle"
                        required="true"
                        text="{i18n>afcmTitle}" />
                    <Input
                        id="cmTitle"
                        type="Text"/>
                    <Label
                        labelFor="shipId"
                        required="true"
                        text="{i18n>afShip}" />
                    <Select
                        id="shipId"
                        forceSelection="false"
                        items="{
                            path: 'musterdrillData>/ships',
                            sorter: { 
                                path: 'name' 
                            }
                        }">
                        <core:Item key="{musterdrillData>id}" text="{musterdrillData>name}" />
                    </Select>
                    <Label 
                        labelFor="drillColor"
                        required="true"
                        text="{i18n>afDrillColor}"/>
                    <SegmentedButton 
                        id="drillColor"
                        selectedKey="{oGeneralData>/color}"
                        items="{musterdrillData>/drillSelections}">
                        <items>
                            <SegmentedButtonItem 
                                text="{musterdrillData>title}"
                                enabled="{musterdrillData>isActive}"
                                key="{musterdrillData>value}"/>
                        </items>
                    </SegmentedButton>
                    <Label 
                        labelFor="q1" 
                        required="true"
                        text="1.1 [Emergency Organization] Was the correct announcement made?" />
                    <Switch id="q1" state="true" customTextOn="Yes" customTextOff="No">
                        <layoutData>
                            <FlexItemData growFactor="1" />
                        </layoutData>
                    </Switch>
                    <Label 
                        labelFor="n1" 
                        text="1.1 - Notes" />
                    <TextArea
                        id="n1"
                        growing="false"
                        growingMaxLines="0"
                        height=""
                        maxLength="0"
                        rows="4"
                    >
                    </TextArea>
                    <Label 
                        labelFor="q2" 
                        required="true"
                        text="1.2 [Emergency Duty] Was FCP reported from OFCS?" />
                    <Switch id="q2" state="true" customTextOn="Yes" customTextOff="No">
                        <layoutData>
                            <FlexItemData growFactor="1" />
                        </layoutData>
                    </Switch>
                    <Label 
                        labelFor="n2" 
                        text="1.2 - Notes" />
                    <TextArea
                        id="n2"
                        growing="false"
                        growingMaxLines="0"
                        height=""
                        maxLength="0"
                        rows="4"
                    >
                    </TextArea>
                    <List
                        items="{musterdrillData>/drillSelections}"
                        >
                        <items>
                            <CustomListItem>
                                <FlexBox
                                    height="100px"
                                    alignItems="Start"
                                    justifyContent="Center">
                                <Label 
                                    required="true"
                                    text="{musterdrillData>title}">
                                    <layoutData>
                                        <FlexItemData growFactor="1" />
                                    </layoutData>
                                </Label>
                                <Switch state="true" customTextOn="Yes" customTextOff="No">
                                    <layoutData>
                                        <FlexItemData growFactor="1" />
                                    </layoutData>
                                </Switch>
                                </FlexBox>
                            </CustomListItem>
                        </items>
                    </List>
                </form:content>
            </form:SimpleForm>
        </content>
        <footer>
            <Toolbar>
                <ToolbarSpacer/>
                <Button text="{i18n>afBtnSave}"/>
            </Toolbar>
        </footer>
    </Page>
</mvc:View>

[vneecious · Accepted solution]

Hi, Jocel. You can use <VBox>.

<VBox items=“{yourModel>/items}”>
<!— your switch —>
</VBox>

[jmandap · Accepted solution]

Hi Vinicius,

I tried it and works fine, the only problem now is the layout:

It is not align with the simple form, is it alright to remove the SimpleForm ? , If I remove the simple form I can still submit the form without that right?

<form:SimpleForm 
                id="assessmentForm"
                title="Instruction #{oGeneralData>/instructionNo}"
                layout="ResponsiveGridLayout"
                editable="true"
                class="sapUiResponsiveMargin"
                width="auto"
                labelSpanL="3" labelSpanM="3"
                emptySpanL="4" emptySpanM="4"
                columnsL="1" columnsM="1">

                <form:content>
                    <Label 
                        labelFor="cmId"
                        required="true"
                        text="{i18n>afCmId}" />
                    <Input
                        id="cmId"
                        type="Number"
                        placeholder="{i18n>afCmIdPlaceHolder}"/>
                    <Label 
                        labelFor="cmENum"
                        required="true"
                        text="{i18n>afECmNo}" />
                    <Input
                        id="cmENum"
                        type="Number"/>
                    <Label 
                        labelFor="cmDepartment"
                        required="true"
                        text="{i18n>afCmDepartment}" />
                    <Input
                        id="cmDepartment"
                        type="Text"/>
                    <Label 
                        labelFor="cmTitle"
                        required="true"
                        text="{i18n>afcmTitle}" />
                    <Input
                        id="cmTitle"
                        type="Text"/>
                    <Label
                        labelFor="shipId"
                        required="true"
                        text="{i18n>afShip}" />
                    <Select
                        id="shipId"
                        forceSelection="false"
                        items="{
                            path: 'musterdrillData>/ships',
                            sorter: { 
                                path: 'name' 
                            }
                        }">
                        <core:Item key="{musterdrillData>id}" text="{musterdrillData>name}" />
                    </Select>
                    <Label 
                        labelFor="drillColor"
                        required="true"
                        text="{i18n>afDrillColor}"/>
                    <SegmentedButton 
                        id="drillColor"
                        selectedKey="{oGeneralData>/color}"
                        items="{musterdrillData>/drillSelections}">
                        <items>
                            <SegmentedButtonItem 
                                text="{musterdrillData>title}"
                                enabled="{musterdrillData>isActive}"
                                key="{musterdrillData>value}"/>
                        </items>
                    </SegmentedButton>
                    <Label 
                        labelFor="q1" 
                        required="true"
                        text="1.1 [Emergency Organization] Was the correct announcement made?" />
                    <Switch id="q1" state="true" customTextOn="Yes" customTextOff="No">
                        <layoutData>
                            <FlexItemData growFactor="1" />
                        </layoutData>
                    </Switch>
                    <Label 
                        labelFor="n1" 
                        text="1.1 - Notes" />
                    <TextArea
                        id="n1"
                        growing="false"
                        growingMaxLines="0"
                        height=""
                        maxLength="0"
                        rows="4"
                    >
                    </TextArea>
                    <Label 
                        labelFor="q2" 
                        required="true"
                        text="1.2 [Emergency Duty] Was FCP reported from OFCS?" />
                    <Switch id="q2" state="true" customTextOn="Yes" customTextOff="No">
                        <layoutData>
                            <FlexItemData growFactor="1" />
                        </layoutData>
                    </Switch>
                    <Label 
                        labelFor="n2" 
                        text="1.2 - Notes" />
                    <TextArea
                        id="n2"
                        growing="false"
                        growingMaxLines="0"
                        height=""
                        maxLength="0"
                        rows="4"
                    >
                    </TextArea>
                    <VBox
                        items="{musterdrillData>/drillSelections}"
                    >
                        <items>
                            <HBox>
                                <VBox>
                                    <Label 
                                        required="true"
                                        text="{musterdrillData>title}">
                                    </Label>
                                </VBox>
                                <VBox>
                                    <Switch state="true" customTextOn="Yes" customTextOff="No">
                                    </Switch>
                                </VBox>
                            </HBox>
                        </items>
                    </VBox>
                </form:content>
            </form:SimpleForm>

[vneecious · Accepted solution]

• If I remove the simple form I can still submit the form without that right?

Right.

[jmandap · Accepted solution]

Thanks Vinicius!

[former_member634193]

Also, if you want to dynamically add content - you can do that in your view controller.

I tried using the below code in my dev space, and it adds with proper alignment.

You will get more flexibility with your data by doing this programmatically.

var oForm = this.getView().byId('<Your_Form_ID>');
         
  for (let index = 0; index < arr.length; index++) {
  oForm.addContent( new sap.m.Label({ text: arr[index] }) );
  oForm.addContent( new sap.m.Input({ type: sap.m.InputType.Text, placeHolder: "Some Text" }) );
}

[former_member634193]

You can use the below method

<List headerText="Text"  items="{path: '/Collection'}" >
    <CustomListItem>
        <HBox>
            <VBox  >
                <Link text="{Name}" target="{Url}" press="handlePress"/>
                <Label text="{Desc}"/>
            </VBox>
        </HBox>
    </CustomListItem>
</List>

[jmandap]

Thanks Brian! I did use this but it is not align with the design of the form, this was rendered ul/li , I want it to be the same with the form, but thanks again! I will take note of this so that I can use it in the future