Oracle Apex: Let User Select the Theme of His Choice

Oracle Apex: Let User Select the Theme of His Choice

You can create an option in your Oracle Apex application to give the user an ability to select the theme of his choice at runtime. Below is a simple example. Follow these steps:

1. Create a Page in Oracle Apex

Create a normal page (not a dialog page) in your application and set the following property:

  • Page Mode: Normal

2. Create a Region

Create a static region and set the following properties:

  • Title: Select Theme
  • Column Span: 5
  • Template: Standard

3. Create a Radio Button

Do the right-click on the region you just created and then select the option Create Page Item and set the following properties:

  • Name: P2_THEMES
  • Type: Radio Group
  • Label: Themes
  • Number of Columns: 1
  • List of Values: SQL Query
  • Display Extra Values: No
  • Display Null Value: No
  • SQL Query: Add the following query in it:
Select
    Decode(nvl(apex_theme.get_user_style(:app_id, :app_user, s.theme_number), 0), s.theme_style_id, s.name || '(Current Theme)', s
    .name) d,
    s.theme_style_id r
From
    apex_application_theme_styles   s,
    apex_application_themes         t
Where
    s.application_id = t.application_id
    And s.theme_number = t.theme_number
    And s.application_id = :app_id
    And t.ui_type_name = 'DESKTOP'

4. Create a Dynamic Action on Radio Button

Do the right-click on the radio button on P2_THEMES and select the option Create Dynamic Action and set the following properties:

  • When: Change
  • Selection Type: Item(s)
  • Item(s): P2_THEMES

5. Create a True Action

Create a True action on the above dynamic action and set the following properties:

  • Action: Execute PL/SQL Code
  • PL/SQL Code: Add the following code in it:
Begin
    apex_theme.set_user_style(p_application_id => :app_id, 
    p_user => :app_user, 
    p_theme_number => 42, 
    p_id => :p2_themes);
End;
  • Items to Submit: P2_THEMES, APP_ID, APP_USER
  • Fire on Initialization: No

6. Create One More True Action

Create one more True action and set the following properties:

  • Action: Execute JavaScript Code
  • Code: location.reload();
  • Fire on Initialization: No

It is done now. Save the changes and run the page to test.

Now when you change the radio button, it will change the theme at that moment.

Oracle Apex: Change theme at runtime.

Related Tutorials:

This Post Has One Comment

  1. Ramish

    this gives an error and then page reload and theme changes
    and how we place it in the navbar rather than on a page

Comments are closed.