how to customize upload collection in sapui5 xml

[former_member9281]

Hi,

I've created a file upload and by default it is coming like this.

How can I remove ( Attachment(0), and the icon with text) to make it like this? in XML

This is my code:

<UploadCollection
    id="UploadCollection"
    noDataText=""
    noDataDescription=""
    maximumFilenameLength="55"
    maximumFileSize="10"
    multiple="true"
    sameFilenameAllowed="flase"
    instantUpload="false"
    change="onChange"
    fileDeleted="onFileDeleted"
    fileRenamed="onFileRenamed"
    filenameLengthExceed="onFilenameLengthExceed"
    fileSizeExceed="onFileSizeExceed"
    typeMissmatch="onTypeMissmatch"
    uploadComplete="onUploadComplete"
    beforeUploadStarts="onBeforeUploadStarts">
</UploadCollection>

[former_member227918 · Accepted solution]

I am not sure if we can achieve this from standard property of the control,

you can try below workaround using css, might help you,

// Hide Icon
li[id*='UploadCollection-list-nodata'] span {
    display: none;
}
//Hide no data description
li[id*='UploadCollection-list-nodata'] div[id*='UploadCollection-no-data-description'] {
    display: none;
}
//hide number of attachment label
div[id*='UploadCollection-numberOfAttachmentsTitle'] {
    display: none;
}
// Change no data text from 'No files found' to 'No data' - // you can avoid below two css class if ok to go with 'No files found' (existing text)
div[id*='UploadCollection-no-data-text'] {
   visibility: hidden;
   position: relative;
}
div[id*='UploadCollection-no-data-text']:after {
   visibility: visible;
   position: absolute;
   content: "No data";
}

Note: 'UploadCollection' is ID of control as you have already.

Hope this helps! 🙂

[former_member9281 · Accepted solution]

It works perfectly! Many thanks.

[Former Member]

I know this thread is almost a year old but I'd like to chime in for future readers.

Overwriting CSS properties via div id's is generally a bad idea in UI5. You can do it in such cases where standard properties/aggregations don't exist, such as the case for the file icon in the content area, but make sure your selectors are written for multiple platforms.

To answer your question, i would do it this way:

To remove the attachment text: Add the following toolbar aggregation for the Upload Collection control

<toolbar> <OverflowToolbar> <ToolbarSpacer /> <UploadCollectionToolbarPlaceholder /> </OverflowToolbar> </toolbar>

Add noDataDescription="No Data" to UploadCollection.

Use css to hide icon.

Best Regards,

Greg

[former_member611303]

Hey

Akhilesh Upadhyay

its not working any other suggestion ??

thanks

Jai sharma