F5 Logo MyF5
Search
  1. MyF5 Home
  2. BIG-IP Access Policy Manager: Advanced Customization Examples
  3. Advanced Customization Using Templates
Manual Chapter : Advanced Customization Using Templates

Applies To:

Show Versions Show Versions

BIG-IP APM

  • 16.0.1, 16.0.0, 15.1.10, 15.1.9, 15.1.8, 15.1.7, 15.1.6, 15.1.5, 15.1.4, 15.1.3, 15.1.2, 15.1.1, 15.1.0
Manual Chapter

Advanced Customization Using Templates

Overview: Downloading templates and updating background images

Complete these initial steps to work with Access Policy Manager® advanced customization templates (1, 2, and 3) for the Logon Page.

Preparing to customize using a template

To use an F5 customization template, start by completing these steps.
  1. Download the templates from the Customizing APM end user login page with APM Advanced Customization Templates page on DevCentral and extract all the files.
  2. Create a new access profile or identify an existing one that you want to customize.
  3. Either add a new Logon Page item to the access policy or edit an existing Logon Page item in the visual policy editor to return it to these default settings:
    1. Make sure there is one logon page field of type
      text
       and that the
      Post Variable Name
       field contains
      username
       and that the
      Read Only
       field is set to
      No
      .
    2. Make sure there is one field of type
      password
       and that the
      Post Variable Name
       field contains
      password
       and that the
      Read Only
       field is set to
      No
      .
    3. Make sure there are three logon page fields of type
      none
      .
    4. Save any changes you made to the logon page item.
  4. In the visual policy editor, click
    Apply Access Policy
    .

Importing graphics from an end-user logon page template

Import any graphics from F5 advanced customization template-1, template-2, or template-3 into the Image Browser to make them available to the Customization Tool.
  1. On the Main tab, click
    Access
    Profiles / Policies
    Customization
    General
    .
    The Customization tool appears in General Customization view, displaying
    Form Factor: Full/Mobile Browser
     settings.
  2. On the menu bar, click
    Image Browser
    .
    The image browser opens in a new screen.
  3. Import each graphic file that was included with the template:
    1. Click
      Add Image
      .
      A file browser screen opens.
    2. Locate the folder into which you extracted files from the template.
    3. Select a graphic file (
      .jpg
      ,
      .png
      ,
      .gif
      ), and click
      Open
      .
      In the Image Browser, a file retains its name. The name of each file in the Image Browser must be unique.
      After the file loads, the image displays in the Image Browser, labeled with its name. If a file of the same name already exists in the Image Browser, the file does not load.
    4. If a file does not load due to a naming conflict, you must either delete the file of the same name from the Image Browser and then try to upload it again or rename the file in the template folder and then try to upload it again.
  4. Close the image browser screen.
Files in the image browser are available to select from any object that you customize.

Providing background images for advanced customization

Adding an image to the Advanced Customization Images in the General Customization view is a prerequisite to changing the name of the background image in the code during advanced customization.
A template might include more than one background image file. Perform these steps for each one.
  1. From the General Customization view, expand these folders
    Customization Settings
    Access Profiles
    NameOfYourProfile
    Common
    .
  2. Click
    Advanced Customization Images
    .
    Ten image names and values display in the right pane. The default value of any image that has not been replaced by a custom image is
    /public/images/my/tr.gif
    .
  3. Click the value of any image to replace it with a custom image.
    An icon displays at the end of the row.
  4. Click the icon.
    A
    Replace
     button displays below the row.
  5. Click
    Replace
    .
    A popup screen opens displaying images that were imported into the image browser.
  6. Locate the image you want to use as the background image, click it, and click
    Change
    .
    A background image included with a template has the word
    background
     in its name, such as
    background.jpg
     or
    background.png
    . If multiple background images are included, a number is appended to the name; for example,
    background-1.png
     or
    background-2.png
    .
    The popup screen closes. A value similar to
    /Common/background.jpg
     displays in the value field.
  7. Press
    Enter
     to finalize the change.
    The value in the field changes to something like this
    /public/images/customization/
    NameOfYourProfile
    _general_ui/image
    xx
    _en.
    png
    .
  8. Copy the value for the custom image from the field; save it in a memo or notepad file and note that it is the name of the background image that you want to use.
  9. Replace any other default images (
    /public/images/my/tr.gif
    ) with any other background image files that you find in the template folder.
    Copy the value of each image to the memo or notepad file.
  10. On the menu bar, click
    Save
    .

Replacing the background image in the code

Edit the stylesheet code provided with the template and then append the edited code to stylesheets in the Customization tool to use a custom background image.
  1. Navigate to the folder on your system with the template files.
  2. Open the
    apm.css-addon
     file with a text editor.
  3. Search for these characters, including the dot:
    background.
    Commented lines of code display above, around, or below these characters. Instructions in the comments describe whether to uncomment any lines of code; they also specify which filename to replace with the value of a background image from your notes.
  4. Follow the instructions in the code.
  5. Save the file.
  6. Copy the entire contents of the file.
  7. On the Main tab, click
    Access
    Profiles / Policies
    Customization
    Advanced
    .
  8. Expand these folders
    Customization Settings
    Access Profiles
    NameOfYourProfile
    Common
    .
    A list of files displays, including these stylesheets:
    apm_full.css
    ,
    apm_mobile.css
    ,
    apm_mobile_ppc.css
    , and
    apm_edge.css
    .
  9. Repeat these steps for each stylesheet:
    1. Click the name of the style sheet.
      Code displays in the right pane
    2. Scroll to the end of the code and after the last line, paste the contents of the
      apm.css-addon
       file.
    3. At the top of the right pane, select
      Save Draft
      .
      A popup confirmation screen displays.
    4. Click
      Yes
      .
      The name of the file that you saved now displays in italics.
  10. On the menu bar, click
    Save
    .
    The name of any file that you saved as a draft changes to display without italics.

About advanced customization template 1

Access Policy Manager advanced customization template 1 provides the code and images to produce a logon page with this look and feel.
Template 1 customization example result
Logon page with OWA look and feel
The radio buttons and check box on this page are hardcoded in the logon page code that is included with template 1. Before you start these tasks, download the template, import the graphics from the template into the Customization tool, and complete the steps for replacing the background image in the code.

Providing images for logon page advanced customization

Adding an image to Advanced Customization Images in the General Customization view is a prerequisite to updating an image in the code during advanced customization of the logon page.
  1. On the Main tab, click
    Access
    Profiles / Policies
    Customization
    General
    .
  2. Expand these folders
    Customization Settings
    Access Profiles
    NameOfYourProfile
    Access
    Logon Pages
    NameOfALogonPage
    .
  3. Click
    Advanced Customization Images
    .
    Ten image names and values display in the right pane. The value of any image that has not been replaced with a custom image is
    /public/images/my/tr.gif
    .
  4. Click the value of any image to replace it with a custom image.
    An icon displays at the end of the row.
  5. Click the icon.
    A
    Replace
     button displays below the row.
  6. Click
    Replace
    .
    A popup screen opens displaying images that were imported into the image browser.
  7. Locate
    top.png
     click it, and click
    Change
    .
    The popup screen closes. A value similar to
    /Common/top.jpg
     displays in the value field.
  8. Press Enter to finalize the change.
    The value in the field changes to something like
    /public/images/customization/Common/
    ProfileName
    _act_logon_page_ag/image
    xx
    _en.png
    .
  9. Copy the value for the custom image from the field; save it in a memo or notepad file.
  10. Replace another of the default images with
    bottom.png
    ; copy the value for the image to the memo or notepad and note that it is the value for
    bottom.png
    .

Updating the logon page code

Edit the logon page code provided in template 3 to add the logo to it and put the template code into effect by replacing the existing logon page code with it.
  1. Navigate to the folder on your system with the template files.
  2. Open the
    login.inc-replacement
     file with a text editor.
  3. Search for the characters ATTENTION.
    The line after it looks similar to this:
  4. Replace "logo.png" with the value that you saved to a memo when you updated the Advanced Customization Images setting. Retain the quotes around the value.
    The result should be similar to this.
    <img id='logo' src='/public/images/customization/Common/profilename_act_logon_page_ag/image00_en.png'>
  5. Select and copy the entire contents of the
    logon.inc-replacement
     file.
  6. From the
    View
     list at the top right of the screen, select
    Advanced Customization
    .
    The Customization tool switches to the advanced view.
  7. Expand these folders
    Customization Settings
    Access Profiles
    NameOfYourProfile
    Access
    Logon Pages
    NameOfALogonPage
    .
  8. Click
    logon.inc
    ., same as above, right? cmc 12/2016
    Code displays in the right pane.
  9. Select all of the code in the right pane and replace it by pasting the contents of the
    logon.inc-replacement
     file in its place.
  10. At the top of the right pane, click
    Save Draft
    .
    The name of the file that you saved now displays in italics.
  11. On the menu bar, click
    Save
    .
    The name of any file that you saved as a draft changes to display without italics.
  12. To change the label for any logon page input field (
    Username
    ,
    Password
    , and so on), you can:
    • Edit the logon page properties using the visual policy editor.
    • Edit the logon page text from the General Customization view.
  13. Click the
    Apply Access Policy
     link at the top of the screen.

Saving values entered on the logon page

To create session variables to record the values that the user selected on the logon screen, you add more fields to the logon page.
You must make this change using the visual policy editor.
  1. On the Main tab, click
    Access
    Profiles / Policies
    .
    The Access Profiles (Per-Session Policies) screen opens.
  2. In the Per-Session Policy column, click the
    Edit
     link for the access profile you want to configure.
    The visual policy editor opens the access policy in a separate screen.
  3. Click the
    Logon Page
     item link.
    If you retained the default item name, the link is labeled
    Logon Page
    .
    A Properties popup screen opens.
  4. To record whether the user logged on from a public or a private computer, in the table with the five numbered rows update an empty row.
    1. From the
      Type
       list, select
      text
      .
    2. In the field in the
      Post Variable Name
       column, type
      pubpriv
      .
    3. In the field in the
      Session Variable Name
       column, type
      pubpriv
      .
  5. To record whether the user selected the light version of OWA, in the table with the five numbered rows update an empty row.
    1. From the
      Type
       list, select
      text
      .
    2. In the field in the Post Variable Name column, type
      light
      .
    3. In the field in the Session Variable Name column, type
      light
      .
  6. Click
    Save
    .
    The properties screen closes and the policy displays.
  7. Click the
    Apply Access Policy
     link to apply and activate the changes to the policy.
To apply this access policy to network traffic, add the access profile to a virtual server.
To ensure that logging is configured to meet your requirements, verify the log settings for the access profile.

About advanced customization template 2

Access Policy Manager advanced customization template 2 provides for configuring these options:
  • Multiple background images that display randomly (or one static background image)
  • A branding image to display on the logon page
  • User-configured lists and radio button fields on the logon page
The end result of customization with template 2 should look very similar to this.
class="- topic/title "> Template 2 configuration example
logon page example
This example uses the
background.jpg
 file from the template.
Before you start these tasks, download the template, import the graphics from the template into the Customization tool, and complete the steps for replacing the background image in the code.

Providing an image for logon page branding

Adding an image to Advanced Customization Images in the General Customization view is a prerequisite to changing the name of the branding image in the code during advanced customization of the logon page.
  1. On the Main tab, click
    Access
    Profiles / Policies
    Customization
    General
    .
    The Customization tool appears in General Customization view, displaying
    Form Factor: Full/Mobile Browser
     settings.
  2. Expand these folders
    Customization Settings
    Access Profiles
    NameOfYourProfile
    Access
    Logon Pages
    NameOfALogonPage
    .
  3. Click
    Advanced Customization Images
    .
    Ten image names and values display in the right pane. The value of any image that has not been replaced with a custom image is
    /public/images/my/tr.gif
    .
  4. Click the value of any image to replace it with a custom image.
    An icon displays at the end of the row.
  5. Click the icon.
    A
    Replace
     button displays below the row.
  6. Click
    Replace
    .
    A popup screen opens displaying images that were imported into the image browser.
  7. Locate the
    branding.jpg
     image, click it, and click
    Change
    .
    The popup screen closes. A value similar to
    /Common/branding.jpg
     displays in the value field.
  8. Press Enter to finalize the change.
    The value in the field changes to something like
    /public/images/customization/Common/
    ProfileName
    _act_logon_page_ag/image
    xx
    _en.png
    .
  9. Copy the value for the custom image from the field; save it in a memo or notepad file.
  10. On the menu bar, click
    Save
    .

Updating the logon page code

Edit the logon page code provided in template 3 to add the logo to it and put the template code into effect by replacing the existing logon page code with it.
  1. Navigate to the folder on your system with the template files.
  2. Open the
    login.inc-replacement
     file with a text editor.
  3. Search for the characters ATTENTION.
    The line after it looks similar to this:
  4. Replace "logo.png" with the value that you saved to a memo when you updated the Advanced Customization Images setting. Retain the quotes around the value.
    The result should be similar to this.
    <img id='logo' src='/public/images/customization/Common/profilename_act_logon_page_ag/image00_en.png'>
  5. Select and copy the entire contents of the
    logon.inc-replacement
     file.
  6. From the
    View
     list at the top right of the screen, select
    Advanced Customization
    .
    The Customization tool switches to the advanced view.
  7. Expand these folders
    Customization Settings
    Access Profiles
    NameOfYourProfile
    Access
    Logon Pages
    NameOfALogonPage
    .
  8. Click
    logon.inc
    ., same as above, right? cmc 12/2016
    Code displays in the right pane.
  9. Select all of the code in the right pane and replace it by pasting the contents of the
    logon.inc-replacement
     file in its place.
  10. At the top of the right pane, click
    Save Draft
    .
    The name of the file that you saved now displays in italics.
  11. On the menu bar, click
    Save
    .
    The name of any file that you saved as a draft changes to display without italics.
  12. To change the label for any logon page input field (
    Username
    ,
    Password
    , and so on), you can:
    • Edit the logon page properties using the visual policy editor.
    • Edit the logon page text from the General Customization view.
  13. Click the
    Apply Access Policy
     link at the top of the screen.

Adding lists and radio buttons to the logon page

To add radio buttons or a list to a logon page and to provide values for them, you must use the visual policy editor.
  1. On the Main tab, click
    Access
    Profiles / Policies
    .
    The Access Profiles (Per-Session Policies) screen opens.
  2. In the Per-Session Policy column, click the
    Edit
     link for the access profile you want to configure.
    The visual policy editor opens the access policy in a separate screen.
  3. Click the link for the logon page item.
    If you retained the default item name, the link is labeled
    Logon Page
    .
    A Properties popup screen opens.
  4. To add a list to the logon page and values for it, in the table with five numbered rows update an empty row.
    1. From the
      Type
       list, select
      select
      .
    2. In the field in the
      Post Variable Name
       column, type a name.
    3. In the field in the
      Session Variable Name
       column, type a name.
    4. Click the
      Values
       field.
      A popup screen displays.
    5. For each value that you want users to be able to select, click
      Option
      , type a name into the
      Value
       field, and if you want to display something different from the value, type it in the
      Text (Optional)
       field.
      For example, type
      domain
       in the
      Value
       field and type a domain name in the
      Text (Optional)
       field.
    1. When you are done with adding values, click
      Finished
      .
      The popup screen closes.
  5. To add radio buttons to the logon page and values for them, , in the table with five numbered rows update an empty row.
    1. From the
      Type
       list, select
      radio
      .
    2. In the field in the
      Post Variable Name
       column, type a name.
    3. In the field in the
      Session Variable Name
       column, type a name.
    4. Click the
      Values
       field.
      A popup screen displays.
    5. To add names for radio buttons, click
      Option
      , type a name into the
      Value
       field; if you want to display something different from the value, type it in the
      Text (Optional)
       field.
      For example, type
      region
       in the
      Value
       field and type comma-separated names, such as
      Eastern
      ,
      Western
       in the
      Text (Optional)
       field.
    6. When you are done adding options, click
      Finished
      .
      The popup screen closes.
  6. Click
    Save
    .
    The properties screen closes and the policy displays.
  7. Click the
    Apply Access Policy
     link to apply and activate the changes to the policy.
To apply this access policy to network traffic, add the access profile to a virtual server.
To ensure that logging is configured to meet your requirements, verify the log settings for the access profile.

About advanced customization template 3

Access Policy Manager advanced customization template 3 provides the code and images to produce a logon page with this look and feel.
Template 3 customization result
Template 3 look and feel
Before you start these tasks, download the template, import the graphics from the template into the Customization tool, and complete the steps for replacing the background image in the code.

Providing a logo for logon page customization

Adding an image to Advanced Customization Images in the General Customization View is a prerequisite to updating an image in the code during advanced customization of the logon page.
  1. On the Main tab, click
    Access
    Profiles / Policies
    Customization
    General
    .
    The Customization tool appears in General Customization view, displaying
    Form Factor: Full/Mobile Browser
     settings.
  2. Expand these folders
    Customization Settings
    Access Profiles
    NameOfYourProfile
    Access
    Logon Pages
    NameOfALogonPage
    .
  3. Click
    Advanced Customization Images
    .
    Ten image names and values display in the right pane. The value of any image that has not been replaced with a custom image is
    /public/images/my/tr.gif
    .
  4. Click the value of any image to replace it with a custom image.
    An icon displays at the end of the row.
  5. Click the icon.
    A
    Replace
     button displays below the row.
  6. Click
    Replace
    .
    A popup screen opens displaying images that were imported into the image browser.
  7. Locate the
    logo.png
     file, click it, and click
    Change
    .
    The popup screen closes. A value similar to
    /Common/logo.png
     displays in the value field.
  8. Press Enter to finalize the change.
    The value in the field changes to something like
    /public/images/customization/Common/
    ProfileName
    _act_logon_page_ag/image
    xx
    _en.png
    .
  9. Copy the value for the custom image from the field; save it in a memo or notepad file.
  10. On the menu bar, click
    Save
    .

Updating the logon page code

Edit the logon page code provided in template 3 to add the logo to it and put the template code into effect by replacing the existing logon page code with it.
  1. Navigate to the folder on your system with the template files.
  2. Open the
    login.inc-replacement
     file with a text editor.
  3. Search for the characters ATTENTION.
    The line after it looks similar to this:
  4. Replace "logo.png" with the value that you saved to a memo when you updated the Advanced Customization Images setting. Retain the quotes around the value.
    The result should be similar to this.
    <img id='logo' src='/public/images/customization/Common/profilename_act_logon_page_ag/image00_en.png'>
  5. Select and copy the entire contents of the
    logon.inc-replacement
     file.
  6. From the
    View
     list at the top right of the screen, select
    Advanced Customization
    .
    The Customization tool switches to the advanced view.
  7. Expand these folders
    Customization Settings
    Access Profiles
    NameOfYourProfile
    Access
    Logon Pages
    NameOfALogonPage
    .
  8. Click
    logon.inc
    ., same as above, right? cmc 12/2016
    Code displays in the right pane.
  9. Select all of the code in the right pane and replace it by pasting the contents of the
    logon.inc-replacement
     file in its place.
  10. At the top of the right pane, click
    Save Draft
    .
    The name of the file that you saved now displays in italics.
  11. On the menu bar, click
    Save
    .
    The name of any file that you saved as a draft changes to display without italics.
  12. To change the label for any logon page input field (
    Username
    ,
    Password
    , and so on), you can:
    • Edit the logon page properties using the visual policy editor.
    • Edit the logon page text from the General Customization view.
  13. Click the
    Apply Access Policy
     link at the top of the screen.
Contact Support Contact Support

Have a Question?

Support and Sales >

About F5

Education

F5 Sites

Support Tasks




©2023 F5, Inc. All rights reserved.


Trademarks Policies Privacy California Privacy Do Not Sell My Personal Information