Use Theme: APEX 5.0

By
Normally, you need 5 steps to get a Theme workable from APEX internal application, such as f4000, f4550.
  1. get an empty application from apex 3.x and import to apex 5.1
  2. import f4000 to apex 5.1 (according to Martin's post How do they do it? ) and export its theme
  3. import theme APEX 5.0 exported from f4000 to the empty app
  4. add missing CSS and js files in the empty app Theme Level (detect them according to my previous post Note for APEX 5.1 UI, Theme, Templates and Substitution Strings )
  5. test and verify
Now, probably you just need 1 or 2 steps to start your work with Oracle APEX internal themes depending on your needs.


I have updated all related files into github folder. Here is the list:
  1. f300.sql: the empty application from apex 3
  2. f4000 Theme APEX 5.0 DEMO.sql: home page demo with theme from f4000 (APEX 5.1.0)
  3. f4000_theme.sql: theme APEX 5.0 exported from f4000
  4. f4550 Theme APEX 5.0 DEMO.sql: login page demo with theme from f4550 (APEX 5.1.0)
  5. f4550_theme.sql: theme APEX 5.0 exported from f4550
20170605 Update:
Add two application files exported from 5.1.1 for better compatibility. (In case, import may fail if one more theme 5.0 application from 5.1.0 exists)
  • f4000 Theme APEX 5.0 DEMO_exported_from_apex.oracle.com.sql: home page demo with theme from f4000 (APEX 5.1.1)
  • f4550 Theme APEX 5.0 DEMO_exported_from_apex.oracle.com.sql: login page demo with theme from f4550 (APEX 5.1.1)

How to start?

Why need an application from apex 3.x?

I suppose application from pre 4.1 should be working for this case. Because the theme navigation mode changed to List after that version.

After 4.1, you could change the navigation bar implementation to Classic under UI settings and switch the theme to internal APEX 5.0 but you will not be able to change the template options when developing in page designer.

There might be other ways to directly use internal themes, which I have not yet found.

Here the application from apex 3.x is a sib-application of internal applications, with the same UI genes.

Can we merge all templates from f4xxx into one theme?

Technically, we can. That's what I wanted to do. But there are some bugs when copying or replacing templates under APEX 5.1.0. So I gave up to merge them in my demo. Maybe merge is easier in latest release 5.1.1.

That's why I used two standalone applications to demo two themes from f4000 and f4550.

Thanks and Reference:

Comments

  1. SoukainaJanuary 29, 2019 at 11:34:00 AM CST

    Hi Mr lei,

    I found your post very interesting, and I wanted to reproduce the same thing.
    ie i want to build my own application using theme APEX5.0 (NB: Im using APEX5.1)

    So for that, i I followed your steps until Step 3,and I'm confused, I did not know how to integrate the two themes:
    - f4000_theme.sql (for home demo)
    - f4550_theme.sql (for Login page)
    into one application, because here, in all my application, i have only one Home Page, who was in empty app (Step1), but i dont know how can i implement the Login Page, should i added it ?

    Thank you in advance for help.

    ReplyDelete
    Replies
    1. SoukainaJanuary 30, 2019 at 6:14:00 AM CST

      You can see my result on apex.oracle.com with this credentials:

      Workspace: ws_formation
      Username: asoukaina
      Password: s@boulah123

      I used the Application 100708 - Empty App from 3

      Delete
  2. Luna RoseNovember 12, 2020 at 1:32:00 AM CST

    Thanks for sharing this great information I am impressed by the information that you have on this blog. Same as your blog i found another one Oracle APEX . Actually, I was looking for the same information on internet for
    Oracle Apex Interview Questions and Answers and came across your blog. I am impressed by the information that you have on this blog. It shows how well you understand this subject.



    ReplyDelete

Post a Comment

Popular posts from this blog

Note for APEX 5.1 UI, Theme, Templates and Substitution Strings

By
Image
From application shared components, User Interface section, we can get the hierarchy diagram as below.  Source SVG There are three levels, User Interface, Theme, and Template. UI attributes specify user interface options, including application level logo, favicon, user interface detection (especially application level CSS files for screen auto-detection ) and current theme Theme as a collection of templates, include theme level JavaScript, CSS, icons, image, skin style, and other static files serving current theme, component default template assignment, region default template assignment, and global template options (references between CSS classes and global style options, i.e. Button type option: tiny, Small or large) Template:  Major template types include page, region, report, button, breadcrumb, list and label (with yellow background color) Theme42 also includes templates for Legacy Calendar and Popup LOV as default but I don't draw in the diagram N...
Keep reading

RDS Customizable for APEX 5.1

By
Image
Background Is there a way to set a parent for regions that allocated or assigned to Region Display Selector, especially when there are multiple RDSes in one page? This is the first question when I used RDS in APEX 5.1. I think this is a common question after you find there is a Yes/No option for RDS without a parent node. Then I posted this question to Steven's Blog . er, Yes, I did. It's an old post but Steven still replied and re-posted my question to his twitter after checking with his team. How professional! And then I got the answer is no. No default or original way but the workaround with template or region type. Then I found the plugin RDS Customizable  (link is original design with version 1.1 ). It's for APEX 4+. I used it on APEX 5.1 and found there are some slight bugs. Now I renew it to work gracefully with 5.1 and update source code to github folder . region_type_plugin_com_blogspot_apexnotes_apex_rds_customizable_V1.2.sql : plugin v1.2 source code ...
Keep reading

Use Plugin Code Editor - Part 1/4: Demo

By
Image
If you want to use Code Editor plugin in Oracle APEX internal applications, you need 6 steps below to make it happen from scratch. get an application with f4000 theme (see  Use Theme: APEX 5.0 ) import f4000 to your APEX and export plugin "Code Editor" create test pages using Code Editor detect and add missed CSS and JavaScript files grant corresponding privilege to application parsing schema check issues and fix rock and roll Note: Here using internal Theme APEX5.0 is not mandatory but it's helpful from scratch. Now, you could jump over these steps,  import my demo applications and start you work with Code Editor. Demo If you find page loading without GIFs, please click HD GIFs link below (Due to the GIF size, it will take a while to load.): Native Hybrid Migrated Native Main features: theme APEX 5.0 supported all item type Code Editor plugins with 9 supported code modes with 11 items based on supported modes (PL/SQL Expression and Fun...
Keep reading