Introduction

The File Display component is used to facilitate the uploading of and displaying of files in PhixFlow. It requires a specific Table type to hold the file information, which can be added using an ERD and associated to a table(s) via a Relationship(s).The File Display component can be found in the Serene Grey palette, under Basic Layouts, and in the route of the Standard PhixFlow Labelled paletteImages can be previewed and files can have a place holder image. Serene Grey provides a number of templates, below is an example of the File Display form field.

Image Added

File Display components requires the following key items in order to function

1. A directory on the server to store the uploaded files and an entry in 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. 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, set up create a directory where the files will be uploaded. This should be accessible to the application.
   2. In PhixFlow, from the

      Insert excerpt
      _administration _administration nopanel true

       menu, open System → Configuration
   3. In the System Directories section , → File Table Upload Location field add the address of the directory setup in the first step e.g. C:\Tomcat\webapps\phixflow\data\images

   4. Insert excerpt
      _save_icon _save_icon nopanel true

       Save  save your changes
   5. All uploaded files will now be placed in this directory
2. File Table
   1. On your ERD, add a new 

      Insert excerpt
      _tableFile _tableFile nopanel true

      1. All the required fields are added by default
   2. If required, create a relationship between this table File Table and your desired target table. The target table will require an attribute of type File in order to create a relationship.
      1. For Example, if you wish to upload company logos create a relationship to a your company table, create a logo attribute of type File and link to the File Table Primary Key.
      2. Image Added
   3. Data can now be saved directly to this table or via a relationship

Uploading Files

File Display components work in the same way as all form fields, e.g. they must have a backing attribute and the data needs to be saved.

To Set Up a File Display

1. Drag the File Display component from the Serene Grey palette onto your screenDrag the File Display component from the Serene Grey palette onto your screen

   1. 
      

      Expand

      Serene Grey provides a number of template that incorporate the File Display component, each designed to help you tackle a different task.  Form Fields - Defaults This File Display component is the default for the File data type and is designed to sit inline with the other default form fields. Image Added Basic Layouts The File Display is a component that provides the functionality of the file display in its raw form ready to be added to a screen or your own design. Image Added Card Containers File Display Card A card container which incorporates a read-only File Display component for displaying files and images. Ideal for product images or visual information. Image Added Contact Card A card container which incorporates a read-only File Display component for displaying files and images in a small circle. Ideal for contact profile images. Image Added

      
      

2. Add a backing attribute by right-clicking on the File Display component and selecting

   Insert excerpt
   _attributes_add_backing _attributes_add_backing nopanel true

   1. Select the Primary Key from your File Table if you are saving directly to the table or use the relational attribute (foreign key) on your related table
3. Now, with your screen

   Insert excerpt
   _lock _lock nopanel true

   ed you can drag files onto the File Display component to populate the data. This populates the field
4. Ensure the File Display form field is added to your save mechanism, like with all form fields, so the data is saved