<OverflowToolbar id="header" class="sapUshellSectionHeader" visible="{$this>editable}"> <Label id="label" text="Section Title:" labelFor="title-edit"> <layoutData> <OverflowToolbarLayoutData priority="NeverOverflow" /> </layoutData> </Label> <Input id="title-edit" value="{$this>title}" placeholder="{$this.i18n>Section.TitlePlaceholder}" valueLiveUpdate="true" maxLength="100" required="true" change=".fireTitleChange"> <layoutData> <OverflowToolbarLayoutData priority="NeverOverflow" shrinkable="true" minWidth="10rem" maxWidth="40rem" /> </layoutData> </Input> <ToolbarSpacer /> <Button id="addVisualization" text="{$this.i18n>Section.Button.AddVisualization}" type="Transparent" press=".fireAdd" visible="{$this>enableAddButton}" /> <Button id="showHide" text="{= ${$this>showSection} ? ${$this.i18n>Section.Button.Hide} : ${$this.i18n>Section.Button.Show} }" type="Transparent" press=".setShowSection(!${$this>showSection})" visible="{$this>enableShowHideButton}" /> <Button id="reset" text="{$this.i18n>Section.Button.Reset}" type="Transparent" press=".fireReset" visible="{$this>enableResetButton}" /> <Button id="delete" text="{$this.i18n>Section.Button.Delete}" type="Transparent" press=".fireDelete" visible="{$this>enableDeleteButton}" /> </OverflowToolbar> <Text id="noVisualizationsText" class="sapUshellSectionNoVisualizationsText" text="{$this>noVisualizationsText}" textAlign="Center" visible="{= ${$this>editable} && ${$this>showNoVisualizationsText}}" /> <f:GridContainer id="innerGrid" class="sapUshellSectionGrid" visible="{= ${$this>editable} || ${$this>showSection} }" containerQuery="{$this>enableGridBreakpoints}"> <f:layout> <f:GridContainerSettings rowSize="{= ${$this>sizeBehavior} === 'Small' ? '4.375rem' : '5.25rem' }" columnSize="{= ${$this>sizeBehavior} === 'Small' ? '4.375rem' : '5.25rem' }" gap="0.5rem" /> </f:layout> <f:layoutXS> <f:GridContainerSettings columns="{= ${$this>enableGridBreakpoints} ? 4 : 0 }" rowSize="4.375rem" columnSize="4.375rem" gap="0.5rem" /> </f:layoutXS> <f:layoutS> <f:GridContainerSettings columns="{= ${$this>enableGridBreakpoints} ? 4 : 0 }" rowSize="{= ${$this>sizeBehavior} === 'Small' ? '4.375rem' : '5.25rem' }" columnSize="{= ${$this>sizeBehavior} === 'Small' ? '4.375rem' : '5.25rem' }" gap="0.5rem" /> </f:layoutS> <f:layoutM> <f:GridContainerSettings columns="{= ${$this>enableGridBreakpoints} ? 6 : 0 }" rowSize="{= ${$this>sizeBehavior} === 'Small' ? '4.375rem' : '5.25rem' }" columnSize="{= ${$this>sizeBehavior} === 'Small' ? '4.375rem' : '5.25rem' }" gap="0.5rem" /> </f:layoutM> <f:layoutL> <f:GridContainerSettings columns="{= ${$this>enableGridBreakpoints} ? ${$this>sizeBehavior} === 'Small' ? 12 : 10 : 0 }" rowSize="{= ${$this>sizeBehavior} === 'Small' ? '4.375rem' : '5.25rem' }" columnSize="{= ${$this>sizeBehavior} === 'Small' ? '4.375rem' : '5.25rem' }" gap="0.5rem" /> </f:layoutL> <f:layoutXL> <f:GridContainerSettings columns="{= ${$this>enableGridBreakpoints} ? ${$this>sizeBehavior} === 'Small' ? 16 : 14 : 0 }" rowSize="{= ${$this>sizeBehavior} === 'Small' ? '4.375rem' : '5.25rem' }" columnSize="{= ${$this>sizeBehavior} === 'Small' ? '4.375rem' : '5.25rem' }" gap="0.5rem" /> </f:layoutXL> <f:dragDropConfig> <dnd:DragInfo enabled="{$this>enableVisualizationReordering}" groupName="Section" sourceAggregation="items" dragStart="._dragVisualization" /> <fdnd:GridDropInfo enabled="{$this>enableVisualizationReordering}" groupName="Section" dropLayout="Horizontal" dropPosition="Between" targetAggregation="items" dropIndicatorSize="._getVisualizationLayoutData" drop="._reorderVisualizations" /> </f:dragDropConfig> </f:GridContainer> </VBox> </core:FragmentDefinition>