Attachments area (configuration)

Record attachments can be uploaded in two ways on the portal: in a specific attachment field or in an attachments area. Using the attachment area is more convenient because by default it has a separate upload section (where members can drag files to upload them or use the Browse files action to browse for a file(s) to upload) as well as an overview section (which is basically a grid page where members can see and manage uploaded files).

An attachment area can be added to a detail page (within a detail layout block), a grid page (also within detail layout block), or a home (dashboard) page (within a dashboard layout block).

An example on a grid page:

An example on a detail page:

There are two approaches to configuring an attachment area:

To have attachments linked to records (when a member uploads files, they need to select a record that the file will be attached to). In this case, the structure of pages should follow this rule: the attachments area is added within a detail layout block, while its parent detail page must be a child page to a grid page that contains records, to which attachments will be linked; both the detail page and its parent grid page must have the same data source. An attachment area on a detail page is already related to a specific record.
To have attachments linked to the whole page (uploaded files are not related to a specific record). In this case, there are no requirements to have a parent grid page with the same data source as the attachment area layout block's parent page. The attachment area can be added as part of dashboard or detail layout block.

To simplify configuration of attachments, Xpand Portal provides two pre-configured sets of settings that can be added as part of dashboard or detail layout block: Attachment upload area for detail pages and Attachment upload area for grid pages. When you add one of these layout block parts, the child pages required for the attachment area (an upload area and a grid for attachment overview/management), including default settings, are added automatically. However, you can adjust the settings according to your needs. These two layout block items have the same elements; they are only different in default settings, which were pre-configured to be suitable either for a grid or detail page.

To configure an attachment area

On the detail, or dashboard layout block of a page where you want to add an attachment area (see the requirements for the structure of the parent pages and layout blocks that define whether attached files will be linked to records or the whole page), select the icon, and then select Attachment upload area for detail pages (if the attachment area is going to be embedded in a detail page) or Attachment upload area for grid pages (if the attachment area is going to be embedded in a detail page). The child elements required for the attachment area are created automatically and have the default settings suitable either for a grid or detail page depending on your choice. The default settings are enough to publish the pages and start using the functionality, but you can review and adjust them if necessary.
Go to the created child or page that represents the upload area where members can upload files by dragging them into this area or using the Browse file action.
On the General tab, configure/adjust the general settings:
1. Title - Specifies the title of the layout block element that will be displayed on the page if specified. Specifying the title is optional.
2. Subtitle - Specifies the subtitle of the layout block element that will be displayed on the page if specified. Specifying the subtitle is optional.
3. Icon - Specifies the image that will be displayed in front of the title if specified. Adding an icon is optional. When choosing an icon, select any icon library set except umbraco-icon because icons from this icon library are not meant to be used with front end elements – this may cause bugs and visual glitches.
4. Width settings - Specifies the adaptive grid width settings for the layout block element per device. The width is automatically adjusted depending on the device the page is opened from.
5. Hide element - This setting hides the layout block element from the page. It can be configured per member group. Select one or several member groups, for which this layout block element will be hidden. Alternatively, you can select the ~All~ check box to hide it for all member groups (without the necessity to select every member group's check box) or select the Hide element check box to have all member groups selected at once.
6. Background color - Specifies the color that will be used as background of this layout block element.
7. Background image - Specifies the image that will be displayed in the background of this layout block element.
8. Description - Specifies a description of this layout block element.
9. Navigate-to page - Specifies the portal page that will be displayed when the portal member edits a record. For a promoted filter summary, filling in this setting is not required.
10. Content-from page - Specifies the portal page that will be displayed instead of the created page. The path on the address bar will be that of the original page. Use this setting only if you want to redirect the member to another existing portal page. Select Add to add a page that will be displayed instead of the source page. For a promoted filter summary, filling in this setting is not required.
11. Redirect-to page - Specifies the portal page that will be displayed instead of the created page. The path on the address bar will be that of the target page. Use this setting only if you want to redirect the member to another existing portal page. Select Add to add a page that will be displayed instead of the source page. For a promoted filter summary, filling in this setting is not required.
12. Module assignment & protection - Specifies settings that allow you to assign this content element (localization, page, etc.) to an internal module as well as to protect this element from certain operations (copying, changing, deletion). Select the Configure button to configure module assignment & protection or the Change button to edit existing configuration if it has already been configured.
On the Attachments tab, under Settings, configure/adjust the following settings:
1. Attachments page - Specifies a grid where attachments are stored and displayed.
2. File destination field - Specifies the field from the selected grid where attachments are stored.
3. File name field - Specifies the field from the selected grid where the name of the attached file is stored.
4. File size field - Specifies the field from the selected grid where the size of the attached file is stored.
5. File extension field - Specifies the field from the selected grid where the extension of the attached file is stored.
6. Drop zone height (px) - Specifies the settings that allow you to configure the height of the zone where attachments are dropped in pixels.
7. Allowed file types - Specifies which file types are allowed for attachments.
8. Max upload file size (MB) - Specifies the maximum allowed file size for attachments in megabytes.
9. Drop zone text - Specifies text that will be displayed in the drop zone area.
Select Save and publish to save the changes and publish them on the front end. Optionally, if you were editing the page, you can select Save and preview to preview how the page will look like on the front end.
Go to the next created child grid page that represents the section where uploaded attachments can be seen as well as managed (downloaded or deleted). Adjust the settings in the same way you do when creating grid pages. For this child grid page, the following settings are important:
1. On the Data source tab, in the Entity setting, the PortalAttachments entity must be selected, which was designed for the purpose of displaying attachments. Aso, a filter must be set up where RelatedUniqueid = [parent] UniqueId.
2. On the Grid tab, the following fields should be present, which are used for storing attachment information.
3. On the Permissions tab, the following grid actions are recommended for members to be able to manage attachments
  1. Select - For members to be able to select attachments to perform actions (download and delete).
  2. Refresh - For members to be able to refresh the page to see the latest attachments.
  3. Delete - For members to be able to delete attachments.
  4. List view - For members to be able to switch between tile and list views.
  5. Download files - For members to be able to download attachments.
Select Save and publish to save the changes and publish them on the front end. Optionally, if you were editing the page, you can select Save and preview to preview how the page will look like on the front end.