How Do I Create a URL For Images In Page Builder?

In Page Builder, when you reference an image in the Image URL field, you can enter 4 types of references, depending upon your requirements. The Image URL field appears wherever an image can be referenced in Page Builder. This topic provides the formats for the URL types you can use to reference images in Page Builder.

Images can be added in many locations in Page Builder. Some image URL fields have different file names. These are examples:

  • URL
  • Image URL
  • Background Image URL
  • Active Icon URL
  • Hover Icon URL
  • Idle Icon URL
  • Profile Image URL
  • Thumbnail URL

This screen shows an example from the Image widget.

Figure: Image Widget screen

Image Widget screen

Create an Absolute URL for an Image

You can enter an absolute URL for an image that exists in a location AgilePoint NX can access, such as a public folder on a web server. This type of refence must use a URL with a fully qualified domain name.

Prerequisites

  • Images must be stored in a web server or cloud storage location accessible through HTTPS that AgilePoint NX can access.
  • Images cannot be stored on a local file system, such as your local machine or the AgilePoint Server machine.

Good to Know

  • Images must be referenced with a URL in the format of a fully qualified domain name.

Example

  • https://mywebsite/images/myimage.jpg

Create a URL for an Image From Page Builder Library

Instead of browsing an image in the Page Builder Library, you can enter the image name with a virtual path.

To create an image from Page Builder library, do the procedure in this topic.

Prerequisites

  • To use the virtual Library path, the image must first be uploaded to the Page Builder Library through the Page Builder UI.

    The image file must exist in the Image Library in Page Builder. To add an image to the Image Library, refer to Add Image File screen

    .
  • You can use the relative URL only if you know the image file name. If you do not know the file name, you can use the Image Library option on the Image Source field to select an image from the Image Library.

    For more information, refer to Images screen

    .

Good to Know

  • This virtual Library path is always /library/images/. This path cannot be changed.

Example

  • /library/images/myimage.jpg

Create a URL for an Image From the NX Portal UI

In addition to images in the Page Builder Library, you can display images on a custom page that are uploaded to the NX Portal UI outside of Page Builder. To reference these images, you must use their predefined virtual paths.

You can reference the following image:

  • The profile picture for the runtime app user who is viewing the page.

    The profile picture is configured on Account Settings screen.

    The profile picture always uses this virtual path, which is a literal value:

    • /user/avatar

Other virtual paths may be added in future releases of AgilePoint NX.

Create a Relative Path to a Public Folder on the AgilePoint Server Machine

You can refer to an image in a public folder for AgilePoint NX Portal on the AgilePoint Server machine using a relative path.

Prerequisites

  • The file must be uploaded to the AgilePoint Server machine by an administrator who has access to the folder.
  • The file must exist in a folder that is public by default when AgilePoint Server is installed.

Good to Know

  • The following is the default public folder path on the AgilePoint Server machine:

    C:\Program Files\AgilePoint\AgilePointPortalInstance\public\assets

  • A system administrator can create subfolders under the \assets folder that can also be accessed by Page Builder.
  • The \assets folder is the default public folder, but there may be other public folders on the AgilePoint Server machine.

    For more information contact AgilePoint Professional Services.

When you reference an image with a relative path, the path starts with the name of the public folder.

Examples

  • In this example, the image myimage.jpg exists on the AgilePoint Server machine in the folder C:\Program Files\AgilePoint\AgilePointPortalInstance\public\assets.
    Full Path on the AgilePoint Server machine:
    • C:\Program Files\AgilePoint\AgilePointPortalInstance\public\assets\myimage.jpg

    Value entered in the Web URL field in Page Builder:

    • /assets/myimage.jpg

An AgilePoint Server administrator can create subfolders under the \assets folder.

  • In this example, the subfolder path pages\images\ has been created under the \assets folder on the AgilePoint Server machine.
    Full path on the AgilePoint Server machine:
    • C:\Program Files\AgilePoint\AgilePointPortalInstance\public\assets\ pages\images\myimage.jpg

    Value entered in the Web URL field in Page Builder:

    • /assets/pages/images/myimage.jpg