5.9 Managing Application Logos

Add and update an application logo in an Oracle APEX application.

An application logo displays in the top navigation bar of your application at runtime.

Tip:

To include a logo in your application, your page template must include the #LOGO# substitution string.

• Managing Logos in the User Interface Attributes
  Edit User Interface attributes to add or update an application logo.
• Editing App Logos at Runtime
  Use Edit Logo on the Runtime Developer toolbar to quickly change an app logo that displays at runtime.

5.9.1 Managing Logos in the User Interface Attributes

Edit User Interface attributes to add or update an application logo.

To manage an application logo by editing User Interface attributes:

1. On the Workspace home page, click the App Builder icon.
2. Select an application.

   The Application home page appears.

3. From the Application home page, you can access the User Interface page in two ways:
   • Edit Application Definition button:

     1. Click Edit Application Definition to the right of the application name.

     2. Click the User Interface tab.

   • From Shared Components:

     1. Click Shared Components.

     2. Under User Interface, click User Interface Attributes.

   The User Interfaces page appears.

4. Under Logo, select a logo type. Additional attributes appear depending upon your selection.

   • None - No logo is shown in the app.

   • Image- Creates a logo based on a valid image file type.

     • Logo - Select Image.

     • Image URL - Enter the URL for the image to be used as the logo, including the filename extension. Note your page template must include the #LOGO# substitution string. For example:

       #APP_FILES#my-logo.png

   • Text - Defines a text only logo.

     • Logo - Select Text.

     • Text - Select Text - Enter the text that should be display in the application logo.

   • Image and Text - Defines an image and text logo.

     • Logo - Select Image and Text.

     • Image URL - Enter the URL for the image to be used as the logo, including the filename extension. Note your page template must include the #LOGO# substitution string. For example:

       #APP_FILES#my-logo.png

     • Text - Select Text - Enter the text that should be display in the application logo.

   • Custom

     • Logo - Select Custom.

     • Custom HTML - Enter markup of your application's logo. The value in this field will be inserted into the #LOGO# substitution string of your page template.

5. Click Apply Changes.

Tip:

You can also reference an image uploaded to the static file repository using a substitution string. See Referencing Static Application Files and About Referencing Static Workspace Files.

See Also:

• Managing Static Application Files
• Managing Static Workspace Files
• Creating Custom Themes
• Page Templates

5.9.2 Editing App Logos at Runtime

Use Edit Logo on the Runtime Developer toolbar to quickly change an app logo that displays at runtime.

To add or update an application logo at runtime use Edit Logo:

1. Preview the page by running it.

   The Runtime Developer toolbar displays at the bottom of any editable running page.

2. On the Runtime Developer Toolbar. click Customize and then select Edit Logo.
   
   Description of the illustration select_edit_logo.png

   The Edit Logo dialog appears.

3. Type - Select the type of logo. Options include:

   • None - No logo is shown in the app.

   • Text - Defnes a text only logo.

     • Type - Select Text.

     • Text - Enter the text that should be display as the application logo.

   • Image - Creates a logo based on a valid image file type and under 500 kb in size.

     • Type - Select Image.

     • Specify the image - Drag and drop the file, or click Choose File and navigate to the image.

   • Image and Text:

     • Type - Select Image and Text.

     • Specify the image - Drag and drop the file, or click Choose File and navigate to the image.

   • Custom define custom HTML to serve as the application's logo:

     Due to security concerns, however, this cannot be configured using Edit Logo. When you select Custom, the User Interface Attibutes button appears. Click User Interface Attibutes and add the Custom logo on the User Interface Attributes page.

   In following example, Type is set to Text and the Text reads IT Projects for My Company. Note that the revised logo, IT Projects for My Company, displays at the top of the page.

   
   Description of the illustration edit_logo_text.png
4. Click Save.

   The confirmation message appears:

   Logo saved successfully

5. Click Cancel to exit the dialog.

Note:

You can also edit an application logo by editing the application User Interface attributes. See Managing Logos in the User Interface Attributes.