Contents

Introduction

The File Display component is used to facilitate the uploading of and displaying of files in PhixFlow. Images 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.

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, 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
   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.  save your changes
   5. 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 fields are added by default
   2. If required, create a relationship between this 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. 
   3. Data can now be saved directly to this table or via a relationship

Uploading Files

1. Drag the File Display component from the Serene Grey palette onto your screen
   1.  Click here to 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.

      

      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.

      

      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.

      

      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.

      

2. Add a backing attribute by right-clicking on the File Display component and selecting  Add Backing Attribute
   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  Locked 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

 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 Component Categories and Preferred Parents.

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 Style.

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 CSS Properties.

Formatting Rules

A list of rules about when to apply formatting. Click  Create New to add a new rule; see Formatting Rule.

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 CSS Properties. PhixFlow applies the style to the component when you save changes to the properties tab.