Regarding SimpleForm Control with Auto-Coding

[Former Member]

Dear Fiori Experts,

I am trying to create a SimpleForm under my IconTabFilter2, As you already know, you can do that using SimpleForm. When type "form" and press Ctrl+Tab the code automatically fills it. I want to do the same for SimpleForm with Responsive Grid Layout. Is there any thing that I am missing regarding Auto-Code. I want to learn coding perfectly. Please do clarify my doubt. Suggest me Best Practices, So that I can practice and implement them.

Regards,

Raghu

[FabioPagoti]

I am assuming you are using SAP Web IDE.

Probably what is missing is that you did not include the XML namespace sap.ui.layout.form in your view. It is not included by default when you create a new XML view.

SimpleForm is available in this namespace so you should insert the alias defined in your XML namespace as below. (Check lines 4 and 11).

[Former Member]

Sir, I have added the namespace also sir,

Please check my code:

<mvc:View

  controllerName="com.so.controller.Detail"

  xmlns="sap.m"

  xmlns:mvc="sap.ui.core.mvc"

  xmlns:core="sap.ui.core"

  xmlns:layout="sap.ui.layout"

  xmlns:form="sap.ui.layout.form"

  xmlns:semantic="sap.m.semantic"

  xmlns:footerbar="sap.ushell.ui.footerbar">

  <semantic:DetailPage

  id="page"

  navButtonPress="onNavBack"

  showNavButton="{device>/system/phone}"

  title="{i18n>detailTitle}"

  busy="{detailView>/busy}"

  busyIndicatorDelay="{detailView>/delay}">

  <semantic:content>

  <ObjectHeader

  id="objectHeader"

  title="{CustomerName}"

  number="{

  path: 'GrossAmount',

  formatter: '.formatter.currencyValue'

  }"

  numberUnit="{CurrencyCode}">

  </ObjectHeader>

  <IconTabBar

  id="iconTabBar"

  class="sapUiResponsiveContentPadding">

  <items>

  <IconTabFilter

  id="iconTabBarFilter1"

  icon="sap-icon://hint"

  tooltip="{i18n>detailIconTabBarInfo}">

  </IconTabFilter>

  <IconTabFilter

  id="iconTabBarFilter2"

  icon="sap-icon://attachment"

  tooltip="{i18n>detailIconTabBarAttachments}">

     <content>

         <Text id="tsid" text="HELOOOOO" maxLines="2"></Text>

     <sap.ui.layout.form:SimpleForm id="form1" minWidth="1024" editable="false" layout="ResponsiveGridLayout">

                                <sap.ui.layout.form:content>

                                    <sap.ui.core:Title id="title1" text="More Details"></sap.ui.core:Title>

                                    <Label id="label1" text="Label1">

                                    </Label>

                                    <Text id="text1" text="Text1" maxLines="0">

                                    </Text>

                                    <Label id="label2" text="Label2">

                                    </Label>

                                    <Text id="text2" text="Text2" maxLines="0">

                                    </Text>

                                </sap.ui.layout.form:content>

                            </sap.ui.layout.form:SimpleForm>

     </content>

  </IconTabFilter>

  </items>

  </IconTabBar>

  <Table

  id="lineItemsList"

  width="auto"

  items="{ToLineItems}"

  updateFinished="onListUpdateFinished"

  noDataText="{i18n>detailLineItemTableNoDataText}"

  busyIndicatorDelay="{detailView>/lineItemTableDelay}"

  class="sapUiResponsiveMargin">

  <headerToolbar>

  <Toolbar id="lineItemsToolbar">

  <Title

  id="lineItemsHeader"

  text="{detailView>/lineItemListTitle}"/>

  </Toolbar>

  </headerToolbar>

  <columns>

  <Column>

  <Text text="{i18n>detailLineItemTableIDColumn}"/>

  </Column>

  <Column

  minScreenWidth="Tablet"

  demandPopin="true"

  hAlign="Right">

  <Text text="{i18n>detailLineItemTableUnitNumberColumn}"/>

  </Column>

  </columns>

  <items>

  <ColumnListItem>

  <cells>

  <ObjectIdentifier

  title="{ProductID}"

  text="{ItemPosition}"/>

  <ObjectNumber

  number="{

  path: 'GrossAmount',

  formatter: '.formatter.currencyValue'

  }"

  unit="{CurrencyCode}"/>

  </cells>

  </ColumnListItem>

  </items>

  </Table>

  </semantic:content>

  <semantic:sendEmailAction>

  <semantic:SendEmailAction

  id="shareEmail"

  press="onShareEmailPress"/>

  </semantic:sendEmailAction>

  <semantic:shareInJamAction>

  <semantic:ShareInJamAction

  id="shareInJam"

  visible="{FLP>/isShareInJamActive}"

  press="onShareInJamPress"/>

  </semantic:shareInJamAction>

  <semantic:saveAsTileAction>

  <footerbar:AddBookmarkButton

  id="shareTile"

  title="{detailView>/saveAsTileTitle}"/>

  </semantic:saveAsTileAction>

  </semantic:DetailPage>

</mvc:View>

==============

Showing error at following lines:

Line 15:Unexpected NameSpace sap.ui.layout.form

Line 16:Unexpected NameSpace sap.ui.layout.form

Line 17:Unexpected NameSpace sap.ui.core

Regards,

Raghu

[FabioPagoti]

You declared the namespace but is not using it.

Use form instead of sap.ui.layout.form.

I understood that your problem was about code completion. Weren't you able simulate what I have done in the image attached in my answer?

[Former Member]

Sir, when we add content to IconTabFilter, it should show us right. Is there any other way to find where I am making mistake?

As you said, I just tried with form eventhough it does not show errors, the page is still blank in preview mode.

Regards,

Raghu

[FabioPagoti]

So your error is not "Auto-Coding" or Code Completion.

As you are saying now your SimpleForm is not shown inside your IconTabFilter.

What happens when you run your app? Maybe you have found a bug in Web IDE, maybe the tab is not expanded or maybe you didn't click in the second IconTabFilter.

[Former Member]

Nothing sir, a blank page

[FabioPagoti]

If you see a blank page the issue is not the SimpleForm or IconTabBar,.. probably you have not referenced a correct location of UI5 in the bootstrap.

[Former Member]

Hello Sir, Can you please provide me some link to practice forms with views. So that I can avoid basic mistakes

Regards,

Raghu

[FabioPagoti]

Sir,

There are tons of resources about SAPUI5. I suggest OpenUI5 SDK - Demo Kit walkthrough.

[Former Member]

Yes, you are right.

Can you please check the screen short and coding part

Regards,

    

code:

<mvc:View

  controllerName="com.so.controller.Detail"

  xmlns="sap.m"

  xmlns:core="sap.ui.core"

  xmlns:mvc="sap.ui.core.mvc"

xmlns:layout="sap.ui.layout" "Here its showing unclose xml attribute"

  xmlns:form="sap.ui.layout.form"

  <!error: Unclose xml attribute> xmlns:semantic="sap.m.semantic"

  xmlns:footerbar="sap.ushell.ui.footerbar">

  <semantic:DetailPage

  id="page"

  navButtonPress="onNavBack"

  showNavButton="{device>/system/phone}"

  title="{i18n>detailTitle}"

  busy="{detailView>/busy}"

  busyIndicatorDelay="{detailView>/delay}">

  <semantic:content>

  <ObjectHeader

  id="objectHeader"

  title="{CustomerName}"

  number="{

  path: 'GrossAmount',

  formatter: '.formatter.currencyValue'

  }"

  numberUnit="{CurrencyCode}">

  </ObjectHeader>

  <IconTabBar

  id="iconTabBar"

  class="sapUiResponsiveContentPadding">

  <items>

  <IconTabFilter

  id="iconTabBarFilter1"

  icon="sap-icon://hint"

  tooltip="{i18n>detailIconTabBarInfo}">

  </IconTabFilter>

  <IconTabFilter

  id="iconTabBarFilter2"

  icon="sap-icon://attachment"

  tooltip="{i18n>detailIconTabBarAttachments}">

  </IconTabFilter>

  <IconTabFilter id="iconTabBarFilter3" icon="sap-icon://form">

     <layout:Grid

      id="id21" defaultSpan="L12 M12 S12" width="auto">

         <layout:content>

             <form:SimpleForm

              id="id43"

                  maxContainerCols="2"

              minWidth="1024"

                  editable="false"

              layout="ResponsiveLayout"

              title="{i18n>detailLineItemTableIDColumn}"

              labelSpanL="3"

              labelSpanM="3"

              emptySpanL="4"

              emptySpanM="4"

              columnsL="1"

              columnsM="1">

                        <form:content>

                 <Label> text="{masterFilter1}"</Label>

             <Text>

              id="id55"

             </Text>

              </form:content>

             </form:SimpleForm>

         </layout:content>

     </layout:Grid>

     </IconTabFilter>

  </items>

  <Table

  id="lineItemsList"

  width="auto"

  items="{ToLineItems}"

  updateFinished="onListUpdateFinished"

  noDataText="{i18n>detailLineItemTableNoDataText}"

  busyIndicatorDelay="{detailView>/lineItemTableDelay}"

  class="sapUiResponsiveMargin">

  <headerToolbar>

  <Toolbar id="lineItemsToolbar">

  <Title

  id="lineItemsHeader"

  text="{detailView>/lineItemListTitle}"/>

  </Toolbar>

  </headerToolbar>

  <columns>

  <Column>

  <Text text="{i18n>detailLineItemTableIDColumn}"/>

  </Column>

  <Column

  minScreenWidth="Tablet"

  demandPopin="true"

  hAlign="Right">

  <Text text="{i18n>detailLineItemTableUnitNumberColumn}"/>

  </Column>

  </columns>

  <items>

  <ColumnListItem>

  <cells>

  <ObjectIdentifier

  title="{ProductID}"

  text="{ItemPosition}"/>

  <ObjectNumber

  number="{

  path: 'GrossAmount',

  formatter: '.formatter.currencyValue'

  }"

  unit="{CurrencyCode}"/>

  </cells>

  </ColumnListItem>

  </items>

  </Table>

  </semantic:content>

  <semantic:sendEmailAction>

  <semantic:SendEmailAction

  id="shareEmail"

  press="onShareEmailPress"/>

  </semantic:sendEmailAction>

  <semantic:shareInJamAction>

  <semantic:ShareInJamAction

  id="shareInJam"

  visible="{FLP>/isShareInJamActive}"

  press="onShareInJamPress"/>

  </semantic:shareInJamAction>

  <semantic:saveAsTileAction>

  <footerbar:AddBookmarkButton

  id="shareTile"

  title="{detailView>/saveAsTileTitle}"/>

  </semantic:saveAsTileAction>

  </semantic:DetailPage>

</mvc:View>

[FabioPagoti]

If I am right, would you mind closing this question?