Set "visibleEdit" and "visibleDelete" values of UI5 sap.m.UploadCollectionItem in JS code

Question

I'm working with sap.m.UploadCollection.
Now I want to be able to change the values of enableEdit, enableDelete, visibleEdit, visibleDelete in runtime per file, according to the values coming from the backend, and not only statically in sap.m.UploadCollectionItem via the XML-template.

I've tried something like that:

oController.getModel("files").setProperty("/visibleEdit", false)

but it seems to be a wrong approach.

How can I set a desired value of visibleEdit per file with JS (runtime)?

The view snippet with the UploadCollection component:

<UploadCollection
    id="UploadCollection"
    maximumFilenameLength="255"
    maximumFileSize="10"
    multiple="false"
    showSeparators="All"
    change="onFileChanged"
    noDataText="{texte>/FAM081}"
    fileDeleted="onFileDelete"
    filenameLengthExceed="onFilenameLengthExceed"
    fileRenamed="onFileChange"
    fileSizeExceed="onFileSizeExceed"
    selectionChange="onSelectionChange"
    typeMissmatch="onTypeMissmatch"
    uploadComplete="onUploadComplete"
    uploadButtonInvisible="{=${screen_model>/KomItemAdd}!==true}"
    beforeUploadStarts="onBeforeUploadStarts"
    uploadTerminated="onUploadTerminated"
    items="{path : 'files>/', templateShareable : 'true'}"
    numberOfAttachmentsText="Uploaded (8)"
    mode="SingleSelectMaster"
    uploadUrl="%MY_UPLOAD_URL%">
    <toolbar>
        <OverflowToolbar id="myId">
            <ToolbarSpacer />
            <UploadCollectionToolbarPlaceholder></UploadCollectionToolbarPlaceholder>
        </OverflowToolbar>
    </toolbar>
    <items>
        <UploadCollectionItem
            documentId="{files>documentId}"
            fileName="{files>fileName}"
            mimeType="{files>mimeType}"
            thumbnailUrl="{files>thumbnailUrl}"
            url="{files>url}"

            visible="{= ${files>text}!==''}"

            enableEdit="{=${files>userID}===${userdata>/UserId}}"
            enableDelete="{=${files>userID}===${userdata>/UserId}}"

            visibleDelete="{=${files>userID}===${userdata>/UserId} &amp;&amp; ${screen_model>/KomItemAdd}===true}"
            visibleEdit=  "{=${files>userID}===${userdata>/UserId} &amp;&amp; ${screen_model>/KomItemAdd}===true}"

            attributes="{path : 'files>attributes', templateShareable : 'true'}"
            statuses="{path : 'files>statuses', templateShareable : 'true'}"
            selected="{selected}">
    
            <attributes>
                <ObjectAttribute title="{files>title}"
                text="{files>text}"
                active="{files>active}"
                press="onAttributePress"/>
            </attributes>
    
            <statuses>
                <ObjectStatus title="{files>title}"
                    text="{files>text}"
                    state="{files>state}"
                    icon="{files>icon}"
                    iconDensityAware="{files>iconDensityAware}"
                    textDirection="{files>textDirection}"/>
            </statuses>
        </UploadCollectionItem>
    </items>
</UploadCollection>

In this snippet the value of enableEdit, enableDelete, visibleEdit, visibleDelete are hardcoded, based on a legacy logic.

Now, I'm required to add an additional condition regarding enableEdit, enableDelete, visibleEdit, visibleDelete. Ideally, I want to implement this change in the controller to have more flexibility and more control over this logic.

Answer 1

You need to update the enableEdit, enableDelete, visibleEdit, visibleDelete property value, not updating the value of json model.

Please refer UI5 methods: https://sapui5.hana.ondemand.com/#/api/sap.m.UploadCollectionItem%23methods/setEnableEdit