Skip to Content
avatar image
Former Member

how to customize upload collection in sapui5 xml

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>
defaultattach.png (11.8 kB)
attach.png (2.4 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Sep 10, 2017 at 10:46 AM

    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! :)

    Add comment
    10|10000 characters needed characters exceeded

  • May 10 at 01:43 AM

    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

    Add comment
    10|10000 characters needed characters exceeded