Adjusting column widths for individual columns in ResponsiveGridLayout?

zayidu — Mon, 19 Oct 2020 12:48:24 GMT

Hello Experts,

I am using a ResponsiveGridLayout on my Forms. How can I set widths for individual columns? Below is my code.

I need A rating column to be 20%, AMBEST_DATE column to be 20% and the UploadCollection item as 60% widths.

    <f:Form editable="false">
      <f:title>
        <core:Title text="Additional Information"/>
      </f:title>
      <f:layout>
        <f:ResponsiveGridLayout labelSpanXL="4" labelSpanL="4" labelSpanM="12" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="0"
          emptySpanL="0" emptySpanM="0" emptySpanS="0" columnsXL="2" columnsL="2" columnsM="2" singleContainerFullSize="false"/>
      </f:layout>
      <f:formContainers >
        <f:FormContainer title=" Information:">
          <f:formElements >
            <!-- =====================  A Rating   =============== -->
            <f:FormElement label="A Rating">
              <f:fields >
                <Text class="rightSpacing" text="{AMBEST_RATING}"/>
                <!-- =====================  Date   ================================ -->
                <Text class="rightSpacing"
                  text="{path:'AMBEST_DATE', type: 'sap.ui.model.type.Date', formatOptions: {pattern: 'dd-MM-yyyy', UTC:true}}"/>
                <!-- =====================  File Uploading   ================================ -->
                <l:VerticalLayout>
                  <UploadCollection class="fileUploaderElement" id="idAMBestUploadCollectionDisplay" maximumFilenameLength="100" maximumFileSize="100"
                    items="{path : 'RegulatoryFiles>/Items', templateShareable : 'true'}" showSeparators="None" fileType="{fileTypes>/Items}" multiple="true" 
                     uploadUrl="{URLRegulatoryModel>/url}" noDataDescription="Click "Edit" to add Files"
                    fileDeleted="onRegulatoryFilesDelete" filenameLengthExceed="onFilenameLengthExceed" fileSizeExceed="onFileSizeExceed" mode="None"
                    typeMissmatch="onTypeMissmatch" uploadComplete="onUploadRegulatoryComplete" beforeUploadStarts="onBeforeRegulatoryUploadStarts">
                    <items>
                      <UploadCollectionItem id="idAMBestUploadCollectionItemDisplay" mimeType="{RegulatoryFiles>Files/0/Extension}"
                        fileName="{RegulatoryFiles>Files/0/EscapedName}" documentId="{RegulatoryFiles>ObjectGUID}" enableEdit="false" enableDelete="false"
                        visibleDelete="false" visibleEdit="false"
                        url="/mims/member/download?objectType={RegulatoryFiles>ObjVer/Type}&objectId={RegulatoryFiles>ObjVer/ID}&objectVersion={RegulatoryFiles>ObjVer/Version}&fileId={RegulatoryFiles>Files/0/ID}&fileName={RegulatoryFiles>Files/0/EscapedName}&fileExtention={RegulatoryFiles>Files/0/Extension}"
                        selected="{RegulatoryFiles>selected}">
                        <attributes>
                          <ObjectAttribute title="Format" text="{RegulatoryFiles>Files/0/Extension}" press="onAttributePress"/>
                          <ObjectAttribute title="Size" text="{path : 'RegulatoryFiles>Files/0/Size', formatter : '.formatter.formatByteSize'}"
                            press="onAttributePress"/>
                          <ObjectAttribute title="Modified" text="{RegulatoryFiles>LastModifiedDisplayValue}" press="onAttributePress"/>
                        </attributes>
                      </UploadCollectionItem>
                    </items>
                  </UploadCollection>
                </l:VerticalLayout>
              </f:fields>
            </f:FormElement>
            <!-- ======================================================================= -->
          </f:formElements>
        </f:FormContainer>
      </f:formContainers>
    </f:Form>

Re: Adjusting column widths for individual columns in ResponsiveGridLayout?

jhodel18 — Mon, 19 Oct 2020 14:00:56 GMT

Hi Zayidu,

The example that you may need to look at is this:

https://sapui5.hana.ondemand.com/#/entity/sap.ui.layout.Grid/sample/sap.ui.layout.sample.GridData/code

You will need to use GridData for individual child controls following the below example:

1st: XL3 L3

2nd: XL3 L3

3rd: XL6 L6

Hope it helps.

Re: Adjusting column widths for individual columns in ResponsiveGridLayout?

zayidu — Tue, 20 Oct 2020 06:09:50 GMT

Thanks Jhodel.

Question Re: Adjusting column widths for individual columns in ResponsiveGridLayout? in Technology Q&A

Adjusting column widths for individual columns in ResponsiveGridLayout?

Re: Adjusting column widths for individual columns in ResponsiveGridLayout?

Re: Adjusting column widths for individual columns in ResponsiveGridLayout?