Files in Source View

When you work with the tree view in the App UIs pane, you are essentially viewing a logical representation of an App UI, with visual editors that show content that resides in several source files. If you want to work directly with the source files underlying an artifact, you can access them in the Navigator's Source view.

Source view () provides the complete file structure of your extension's artifacts. Sometimes, two or three separate files might describe an artifact’s behavior and properties. This file structure is also what's checked into your Git repo for version control.

Here's an example of folders and files you might see in Source view—opening a source file will display its contents in the corresponding editor:

extension1/
| sources/
|   | dynamicLayouts/
|   |   | oracle-cx-digitalsalesUi/
|   |   |   | products/
|   |   |   |   | data-description-overlay-x.js
|   |   |   |   | data-description-overlay-x.json
|   |   |   |   | layout-x.html
|   |   |   |   | layout-x.js
|   |   |   |   | layout-x.json
|   |   | self/
|   |   |   | orders/
|   |   |   |   | data-description-overlay.js
|   |   |   |   | data-description-overlay.json
|   |   |   |   | layout.html
|   |   |   |   | layout.js
|   |   |   |   | layout.json
|   | services
|   |   | self/
|   |   |   | catalog.json
|   |   |   | orders/
|   |   |   |   | openapi3.json
|   | ui
|   |   | base/
|   |   |   | app-flow-x.js
|   |   |   | app-flow-x.json
|   |   | self/
|   |   |   | applications/
|   |   |   |   | orders/
|   |   |   |   |   | flows/
|   |   |   |   |   |   | main/
|   |   |   |   |   |   |   | flows/
|   |   |   |   |   |   |   | pages/
|   |   |   |   |   |   |   |   | main-start-page.html
|   |   |   |   |   |   |   |   | main-start-page.js
|   |   |   |   |   |   |   |   | main-start-page.json
|   |   |   |   |   |   |   | main-flow.js
|   |   |   |   |   |   |   | main-flow.json
|   |   |   |   |   | resources/
|   |   |   | fragments/
|   |   |   |   | order-details/
|   |   |   |   |   | chains/
|   |   |   |   |   |   | LoadCustomerDetails.json
|   |   |   |   |   |   | SwitchValueChangeChain.json
|   |   |   |   |   | order-details-fragment.html
|   |   |   |   |   | order-details-fragment.js
|   |   |   |   |   | order-details-fragment.json
|   |   |   | resources/
|   |   |   |   |   | images/
|   |   |   |   |   |   | foo.png
|   | extension.json

Your file structure may be different depending on your configuration. In general, extensions to the base application can be found under the /base folder, extensions to other dependent extensions can be found under /<other_extensionId> (where other_extensionId is the ID of the dependent extension, for example, oracle-cx-digitalsalesUi), and artifacts that are completely new in this extension can be found under /self.

Under these folders, you might see files with a -x suffix, for example, app-x.json or layout-x.json. These are extension files, either from dependencies or created in your extension, that you can modify. The -x files allow you to extend base files. Suppose ExtA has a layout.json file that defines a dynamic layout; ExtB which uses ExtA as a dependency would have a layout-x.json file that extends the one in ExtA. As an ExtB developer, you can modify layout-x.json, but you won't be able to modify the layout.json file from ExtA.

Here's a summary of the different source files and what they are used for:

Folder/File Name	Description
`dynamicLayouts/`	Contains dynamic layout files from dependent extensions as well as new ones created in the extension:
`layout.html` `layout.js` `layout.json`	For each dynamic layout, a JSON file that contains dynamic layout metadata including rule sets, layout fields, and field/form templates used, an HTML file that contains the structure used by field and form templates, and a JavaScript file that contains functions associated with the layout.
`data-description-overlay.js` `data-description-overlay.json`	For each dynamic layout, client metadata files that define additional fields or field metadata to augment the service's OpenAPI definition.
`services/`	Contains files from dependent services as well as new ones created in the extension:
`openapi3.json` `catalog.json`	OpenAPI3-based specification file that contains metadata and request and response schema for static service connections. OpenAPI3-compliant file that contains backend definitions and metadata for dynamic service connections.
`ui/self/applications/an-appui/`	Contains files added when you create a brand new App UI:
`app.js` `app.json`	Files describing the App UI that can be used by every artifact in the App UI, for example, variables that are App UI-scoped, types that describe data structures, and security settings.
`flowname-flow.js` `flowname-flow.json`	For each flow, a JSON file that contains flow metadata and a JavaScript file that contains flow-level functions.
`flowname-pagename-page.html` `flowname-pagename-page.js` `flowname-pagename-page.json`	For each page, an HTML file that specifies page elements, a JavaScript file that determines page functions, and a JSON file that contains page metadata.
`actionchainname.json` `actionchainname-tests.json`	For each action in an action chain, a JSON metadata file about the action. If tests are defined, a JSON metadata file for all tests in the action chain.
`fragmentname-fragment.html` `fragmentname-fragment.js` `fragmentname-fragment.json`	For each fragment, an HTML file that specifies fragment elements, a JavaScript file that determines fragment functions, and a JSON file that contains fragment metadata.
`resources/`	Resource files, such as images (`.png`, `.jpg`, and so on) and style sheets (`css`), which are which are newly imported to your App UI and stored in the corresponding folder. If custom actions are defined, you'll find each action's implementation (`action.js`) and metadata (`action.json`) files as well. The `resources` folder can be at the extension level or at the App UI level.
`extension.json`	Contains extension metadata.