1. Oracle Visual Builder Page Model Reference
  2. Understand the Page Model
  3. Imports
  4. Import Custom CSS

Import Custom CSS

You can load custom CSS through require-css('css![module-path]') inside the imports section in an application, flow, page, and other containers.

The "css" section contains an array for strings for each CSS import. Each string is a (requireJS) 'path' to the CSS to be loaded. The requireJS path can be an absolute path with respect the application, a relative path with respective to the current context (application, flow or page) or an external URL (for example, a CDN path) that can be accessed by the application. Using custom CSS loading through metadata gives the flexibility to load CSS through require-css vs hardcoding it in the HTML markup.

The CSS resources are typically defined at the extension level and App UI level, and can be imported using the conventions mentioned below.

In the following application structure, ext-A depends on ext-B, and extends a layout "incidents" defined in ext-B. extA defines its own CSS files, under ui/self/resources. Additionally, it also defines an App UI (appUi-A) with its own CSS resource. 

ext-A/
  dynamicLayouts/
    self/
      orders/
        layout.json
    ext-B/
      incidents/
        layout-x.json

  ui/
    self/
      applications/
        appUi-A/
          app.json
          pages/
            shell-page.json
            resources/
              css/
                shell-2.css

          resources/
            css/
              app.css
              shell.css

      resources/
        css/
          ext.css

    base/
      pages/
        root/
          first-page-x.json
      app-flow-x.json

Example 1-71 Import CSS in shell-page.json

{
  "imports": {
    "css" : [
      "self:/resources/css/ext.css",  // starts from the extension
      "/resources/css/shell.css",     // starts from the App UI
      "resources/css/shell-2.css",    // not supported, will throw an error
      "https://static.oracle.com/cdn/fnd/gallery/2007.0.0/some.css" // same
    ]
  }
}

In the example above:

  • If the path starts with self:/, the path starts at the root of the current extension (for example, ext-A/ui/self/resources).
  • If the path is absolute, the path starts at the root of the current App UI (appUi-A), equivalent to the path starting with extA/ui/self/applications/appUi-A/resources.
  • If the path is relative, throw an error because a relative path is not supported.
  • If the path is a URL, use that URL.

Example 1-72 Import CSS in app.json

{
  "imports": {
    "css" : [
      "self:/resources/css/ext.css",
      "/resources/css/app.css"
    ]
  }
}

The app.json has access to both the extension level resources (self:/) and the App UI ones (starting with /resources).

Example 1-73 Import CSS in layout-x, app-flow-x, flow-x, page-x

{
  "imports": {
    "css" : [
      "self:/resources/css/ext.css"
    ]
  }
}

Extension artifacts can only access resources defined at the current extension level.