Versions Compared

Old Version 11

changes.mady.by.user Fiona Sargeant

Saved on

compared with

New Version 12

changes.mady.by.user Anthony George

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This page is for application designers who need the ability to ensure files appear download files and/or access them programmatically.

Within your application screens, you may use images and files that you have been uploaded onto the PhixFlow server. For example, your application may need:

  • a file that the user can download
  • an image to be displayed. 

todo-Fiona When do you need to use a soft link rather than just using the file you have uploaded (e.g. in a style, selecting a background image)

Because applications are displayed in browsers, the screens are transmitted to the browser via the Tomcat webserver. If you reference the file using it's path on the PhixFlow server, Tomcat will not be able to serve the image or file to the browser. It will appear as a broken link

  • allowing users to download a file.
  • displaying an image based on expression logic. For example,  display a user image based on the logged in user.


Your administrator can configure the Tomcat webserver to " see " specific PhixFlow directories by creating soft links in from the <path>/tomcat/webapps/phixflow directory; see Configuring Soft Links Between PhixFlow and Tomcat. To reference file or image, use the soft link path that Tomcat will recognise. 

...

Operating SystemSource (Tomcat)
which points to → 

...

Target (Directory)Example Files
Linux<path>/tomcat/webapps/phixflow/

...

datalink

<path>/phixflow/

...

data/

...

datalink/

Snapshot.jpg

MyData.

...

xlsx

Windows<path>\tomcat\webapps\phixflow\

...

datalink<path>/phixflow/

...

data/

...

datalink/

To

...

link to the

...

files use the soft link

...

  • either using a file path:   data-files-link/Snapshot.csv
  • or using a URL:   url("https:data-files-link/Snapshot.csv")

Images and Soft Links

...

To display an image, use the soft link URL, rather than the file path.

For example:

Tomcat has the soft linkwhich points to → a PhixFlow server directorywhich contains the file

:

  • For download, create an action which opens the URL: "datalink/MyData.xlsx"

    • Note, not all file types will invoke a download, for example a PDF will simply open in a new browser tab.

  • For display, an image or PDF can be embedded in a URL component using the value: url("https:datalink/Snapshot.jpg")
  • For display, images can be applied to areas by setting the CSS property to background-image: "datalink/Snapshot.jpg"

Example Setup for Images using a Soft Link

This example covers the scenario where a user has a set of logos and needs PhixFlow to display them based on the Business currently selected.

Step1: Setup the soft link

See Configuring Soft Links Between PhixFlow and Tomcat for the commands

Example locations are shown below:

CSS TagValuebackground-image

url("https:images-link/MyProject/MyImage.png")

background-repeatno-repeatbackground-size

Choose a size, see Image Sizing. Examples: 

  • 100%
  • 20px
    • autoMyImage.png
    Operating SystemSource (Tomcat)Target (Directory)
    Linux<path>/tomcat/webapps/phixflow/images-linkdatalink

    <path>/opt/phixflow/filesdata/imagesdatalink/

    Windows<path>\tomcat\webapps\phixflow\images-linkdatalink<path>/phixflow/filesdata/images/

    To display MyImage.png, use a URL to refer to the soft link   url("https:images-link/MyImage.png")

    For images, you can select an image and use the style settings to configure how it looks. If you need to use a soft link, you cannot then use the style settings to configure how it displays. You need to configure all the settings using CSS Properties. For example, to configure a background image, set CSS Tag and Values as follows:

    datalink/

    The business logos should be uploaded onto the server into the Target directory using the appropriate protocol e.g. FTP.

    It should be noted it is a good idea to create subdirectories under the Target directory for different types of information i.e. "customImages" for the customer logos we are uploading. 

    In this example we will upload our images to: <path>/phixflow/data/datalink/customImages.

    It is assumed that a table exists which contains the names of the Business logos. For example a Businesses table with an attribute called LogoName that holds the name of the business's logo.

    Setup

    1. Create a new screen
    2. Open the palette and add one of the Complete Screens to the screen by dragging and dropping it.
    3. Open the table containing the names of the customer logo e.g. Businesses
    4. Drag the attribute containing the logo name onto the screen e.g. LogoName.
    5. Setting the background image
      1. In the palette find the Area component and drag it onto the screen.
      2. Navigate to its Style Tab and set the following:
        1. Background Repeat: no-repeat
        2. Background Size:      100%
          1. See Image Sizing for more information on this.
      3. In the CSS Properties section, click the add button and set the following:
        1. CSS Tag: background-Image
        2.  Value: "datalink/customerImages"+_form.LogoName
          1. If you are obtaining the logo name from an attribute on a grid or card component, these can be referenced using:
          2. Grid: _selected. AttributeName
          3. Card Component: _current.AttributeName
        3. Expression: Tick
      4. Save all changes
    6. The image should now display inside the Area component.