Introduction

The File Display Gallery component is used to facilitate the uploading and displaying of multiple files in PhixFlow. Files are previewed and where this is not possible, a generic placeholder image is displayed. The Serene Grey palette provides a number of templates, below is an example of the File Display Gallery form field.

File Display Gallery components require the following key items in order to function:

1. A directory on the server to store the uploaded files and an entry in the  System Configuration to point at this location
2. A special type of table called a  File Table to hold the information about the uploaded files
   1. This is added using an ERD
3. A  Table containing an attribute called folderId and of type, string, that is related to the above  File Table via this attribute
   1. This is added using an ERD

Initial Setup

In order to store an uploaded file the following must be completed.

1. Directory
   1. On your server, create a directory where the files will be uploaded. This should be accessible to the application
   2. In PhixFlow, from the  Administration menu, open System →  Configuration

1. 1. In the System Directories section → File Table Upload Location field, add the address of the directory setup in the first step, e.g. /opt/phixflow/data/file
   2.  save your changes
   3. All uploaded files will now be placed in this directory
2. File Table
   1. On your ERD, add a new  File Table
      1. All the required attributes are added by default and cannot be modified
3. Table
   1. On your ERD, use an existing or add a new  Table
      1. Create a new attribute:
         1. Name: folderId
         2. Type: String
   2. Create a Relationship from the folderId attribute on the File Table to the folderId attribute on the 
       Table
   3. Data can now be saved directly to this table or via a relationship

Uploading Files

1. Drag the File Display Gallery component from the Serene Grey palette onto your screen
   1.  View Serene Grey Template

      Serene Grey provides a number of templates that incorporate the File Display Gallery component, each designed to help you tackle a different task. 

      Form Fields - Defaults

      This File Display Gallery component is designed to sit inline with the other default form fields.

      

      Basic Layouts

      The File Display Gallery is a component that provides the functionality of the file display gallery in its raw form ready to be added to a screen or your own design.

      

2. Add a backing attribute by clicking on the component until the properties for the inner component, File Display Gallery, displays on the right
   1. On the  Properties tab, in the Backing Attribute section, click the icon
   2. Select the folderId attribute on your  Table
3. Now, with your screen  Locked you can drag files onto the File Display Gallery component to populate the data. This populates the field
4. Ensure the File Display Gallery form field is added to your save actionflow, so the data is saved

Creating a Download Hyperlink

A text hyperlink can be created that facilitates the downloading of a file.

1. On the screen that is backed by the required table, click  Attributes
2. Navigate the File Table and drag the Url attribute onto your screen
3. A hyperlink will be created that downloads the file associated to the current record, i.e. the file for the record currently on the form
   1. The hyperlink component is created using the template defined in the application's  Properties →  Styles tab → Default Components section → Default File Url Component  

Background Icons

1. When the File Display Gallery is available for the user to upload a file:
   1. 
2. When the user is dragging a file over the File Display Gallery component:
   1. 
3. When the File Display Gallery is read-only, this includes when the screen is  Unlocked:
   1. 

These style can be changed using Formatting Rule and the new CSS Drag Over property that can be applied to a CSS Property.

 Properties Tab

Parent Details

If this item is within or belongs to another, its parent name is shown here. See the Parent Details section on the Common Properties page for more details.

Basic Settings

Backing Attribute

Preferred Parent Categories 

This section includes a list of the Preferred Parent Categories the component can be dragged onto. For example, a button template can have a preferred parent category of button bar, therefore when the button template is dragged onto a screen the button bar will highlight indicating it is a preferred parent for the button template.

This property relates to configuring preferred parents for components; see /wiki/spaces/HELP12/pages/9615609427.

To add a category, open the repository Layout Categories section and drag one into the list.

Advanced Settings

Description

 Styles Tab

Shared Styles

Shared Styles are reusable styles that can be applied to multiple components. Editing a shared style will impact all components where it is being used, therefore proceed with caution when editing and deleting. See /wiki/spaces/HELP12/pages/9615615745.

Click Show the List of Styles to see the styles available in the repository. You can drag styles from the repository into the grid to add a shared style to this component. 

CSS Properties

A list of CSS properties. Click  Create New to add a new CSS style; see /wiki/spaces/HELP12/pages/9615609976.

Formatting Rules

A list of rules about when to apply formatting. Click  Create New to add a new rule; see /wiki/spaces/HELP12/pages/9615610103.

Style Settings

PhixFlow uses the style settings to construct CSS for the component; see w3schools.com CSS for details of CSS. If the formatting you require is not available in this section, you can also create custom styling, see /wiki/spaces/HELP12/pages/9615609976. PhixFlow applies the style to the component when you save changes to the properties tab.

 Actions Tab

Event Handlers

This section has a toolbar with standard buttons. 

The grid contains a list of event handlers configured for this component. Event handlers use a user action, such as a mouse-click, to trigger a table-action or actionflow to run. To add an event handler:

1. Click  Add New
2. PhixFlow opens a new properties tab for the event handler.
3. Select the Event Type, Action Method and specific table-action or actionflow you require; see /wiki/spaces/HELP12/pages/9615616717 properties.

To remove an event handler, use the toolbar button  Delete.

Drop Targets

A list of rules of the action drop-targets on this component. Click  Create New to add a new drop-target; see /wiki/spaces/HELP12/pages/9615608759.

 Security Tab

Access Permissions

See the Common Properties page, Access Permissions section.

 Audit Tab

Audit Summary

See the Common Properties page, Audit Summary section.