Which Editor Do I Use?

The Designer has dedicated editors for each of the building blocks used to develop your application. Each editor provides an easy-to-use interface for editing the files that describe your artifacts and pages.

For example, when designing a page, you might need to define page variables and create action chains, in addition to positioning page components in the page and specifying component properties. The Designer provides editors to help you perform these tasks, so you don’t need to edit the source code of the HTML, JavaScript, and JSON files used to describe the layout and behavior. But if you want to edit the JSON files directly, you have access to a JSON editor.

The Designer's editors provide forms and wizards to help you create and edit the building blocks, for example, to create action chains and to map parameters to variables. When designing pages, you can use a visual editor to compose your pages and use the Quick Starts to help you create the building blocks needed to add some of the functionality commonly used in applications.

When you open an artifact, each artifact opens in a separate tab in the Designer. You switch between editors for the artifact by selecting the appropriate tab in the artifact. The tabs that appear for the artifact depend on the artifact. A Diagram tab appears for application and flow artifacts while a Page Designer tab appears when you open a page. A number in the tab indicates the number of incidences; for example, the hrapp application in this image includes two action chains and one event listener (in addition to types and variables), while the main-start page includes four action chains, four event listeners, and a single type:

Description of the illustration app-designer-overview.png

Here's an overview of the editors available in the Designer:

Tab	Description
Diagram	The Diagram view, shown only for application and flow artifacts, provides a visual representation of how an application is structured in terms of flows and pages. It visualizes an application's root pages, flows, and pages within a flow to provide a quick look at default pages, navigation, and more. For an application artifact, this view displays the application's root page as well as a hierarchical view of the artifact's flows and subflows. For a flow artifact, this view displays the pages contained in the flow and navigation between those pages. See Use the Diagram View.
Page Designer	The Page Designer, shown only for page artifacts, lets you compose the layout of a page. It contains a canvas that represents the page layout and a palette with page components that you drag onto the canvas to add to the page. It also includes a Properties pane that you use to specify the properties of the page’s components and to open Quick Starts. See Use the Page Designer and How Do Quick Starts Work?. If you're looking to design and develop pages based on your data sources, the Data palette is a handy option. It lets you work with REST endpoints that expose data in your application, letting you drag and drop them onto your canvas and display their data in suitable UI components. See The Data Palette.
Action Chains	The Action Chains editor displays a list of the action chains that are defined within the scope of the artifact. You can use this editor to create new action chains and to open action chains in the editor. See About Action Chains.
Event Listeners	The Event Listeners editor displays a list of lifecycle events that are defined for the artifact, the type of event, and the action chain that the event starts. You can use the editor to create new events. See Start an Action Chain From a Lifecycle Event.
Events	The Events editor displays a list of custom events that are defined for the artifact, the type of event, and the action chain that the event starts. You can use the editor to create new events and action chains. See Start an Action Chain From a Lifecycle Event.
Types	The Types editor displays the data types that are defined within the scope of the artifact. You can use the Types editor to create and edit types. See What are Variables and Types?.
Variables	The Variables editor displays the variables and data types that are defined within the scope of the artifact. You can use the Variables editor to create and edit variables. See What are Variables and Types?.
HTML	The HTML editor displays the code for an application’s index.html file when the application artifact is open in the Designer. Use Code view in the Page Designer to view and edit the HTML of pages in apps. See Work With Code Editors.
JavaScript	The JavaScript editor contains a code editor for editing the artifact’s JavaScript functions. By default, application artifacts use a file named app-flow.js, flow artifacts use a file named <FLOWNAME>-flow.js, and page artifacts use a file named <PAGENAME>-page.js to define their JavaScript functions. See Work with the JavaScript Editor.
JSON	The JSON editor contains an editor for editing the JSON file that contains the artifact’s metadata, including descriptions of variables and action chains. By default, application artifacts use a file named app-flow.json, flow artifacts use a file named <FLOWNAME>-flow.json, and page artifacts use a file named <PAGENAME>-page.json. See Work with the JSON Editor.
Settings	The Settings editor contains tabs for editing an artifact’s settings. The options available depend upon the artifact. The Settings editor for flow and application artifacts includes a Security tab, which you can use to set the artifact's security. You can use the Imports tab to import components, custom modules, and CSS files for application artifacts, flows, and pages, and the Translation tab to create additional translation bundles for application artifacts, flows, and pages. See Manage Custom Component, CSS, and Module Imports and Create Translation Bundles.