javascriptsapui5ui5-tooling

How to implement dynamically a view from controller


i need your help please, i have this view that i want to implement dynamically

<mvc:View   
    controllerName="kommissionierung1.controller.GroupeFamilial"    
    xmlns="sap.m" 
    xmlns:core="sap.ui.core"
    xmlns:grid="sap.ui.layout.cssgrid"
    xmlns:mvc="sap.ui.core.mvc" 
      xmlns:f="sap.f">
  <IconTabBar id="IconTabBarID" stretchContentHeight="true" backgroundDesign="Transparent" applyContentPadding="false" expanded="true" class="sapUiResponsiveContentPadding" >
    <items>
      <IconTabFilter text="Famille Douala" >
        <ScrollContainer height="100%" width="100%" horizontal="false" vertical="true">
          <f:GridList id="FormPart4"  items="{GroupeFamiliale>/results}" mode="SingleSelect" selectionChange="onSelectionChange_Click" class="sapUiResponsiveContentPadding">
            <f:customLayout>
              <grid:GridBasicLayout gridTemplateColumns="repeat(auto-fit, minmax(15rem, 1fr))" gridGap="0.5rem" />
              <grid:GridBoxLayout boxWidth="15.5rem" />
            </f:customLayout>

          <f:GridListItem press="onGroup_Click" type="Active" highlightText="Famille par groupage" id="gridListID" >
            <VBox height="50%" class="sapUiSmallMargin">
              <layoutData>
                <FlexItemData growFactor="1" shrinkFactor="0" />
              </layoutData>
              <VBox class="sapUiSmallMargin" >
                <HBox justifyContent="SpaceBetween">
                  <core:Icon
                    src="sap-icon://group"
                    size="2.625rem"
                    color="Default"
                    class="sapUiTinyMarginBottom" />
                </HBox>
                <Title text="Groupe familial"  class="customTextFontSize"  wrapping="true" id="group_Name"/>
                <Text text="{
                              path: 'GroupeFamilial>NumerosIdentifiant',
                               formatter: '.formatter.ConvertToIntFormat' }"  class="customTextFontSize" id="group_Ident"/>
                </VBox>
              </VBox>
            </f:GridListItem>
          </f:GridList>
        </ScrollContainer>
      </IconTabFilter>
    </items>
  </IconTabBar>
</mvc:View>

i don't really understand how to do it with JS. the reasons are that we can have in Icontabfilter from 1...n Tabs, depending of what the model give us back. eg: Today: we just have 1 TabFilter with 2 items. Tomorrow: we have suddently n Tabfilter. n1 has for example 2 items, n2 has 20 items, n3 maybe just 1 item...n Please any help and solution are welcome

Thx in advance


Solution

  • Many thanks Marc, i have just to add in my View the attributs items= myModel and it display dependently of my Data the iconTabFilter as exprected

    <IconTabBar id="IconTabBarID" stretchContentHeight="true" backgroundDesign="Transparent" applyContentPadding="false" expanded="true" class="sapUiResponsiveContentPadding" ** items="GroupeFamiliale>/results" ** >