Connect App Designer To Existing Script

When designing your application you will use various tools in the application designer to view and edit the application's artifacts and pages.

You use the application designer to create and edit the building blocks that prescribe the behavior of pages, application artifacts and flow artifacts in your web and mobile applications. The application designer has dedicated editors for each of the building blocks used to build your application. The editors provide an easy to use interface for editing the files containing the descriptions of 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 application designer provides editors to help you perform these tasks so that you don't need to edit the source code of the HTML, JavaScript and JSON files used to describe the layout and behavior. The application designer also provides a Metadata editor if you want to edit the JSON files directly.

The editors in the application designer 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 application designer. You switch between editors by selecting the editor's icon in the left margin of the application designer. You use the same editors to edit each of your artifacts, with the exception that page artifacts provide a visual Designer for designing the page's layout, and application and flow artifacts provide a Page Flow view for displaying the page artifacts they contain.

Description of app-designer-overview.png follows
Description of the illustration app-designer-overview.png

The following table describes the editors available for editing artifacts.

Editor Icon	Description
	The Page Flow view displays the pages in your application and the navigation flows between the pages. When you open an application artifact, the Page Flow view displays the root page artifacts in your application. When you open a flow artifact, the Page Flow view displays the page artifacts contained in the flow. You can double-click an artifact in the Page Flow view to open it in the Designer. The Page Flow view is only available with application and flow artifacts.
	The Designer is a visual editor for composing the layout of a page. The Designer contains a canvas that represents the page layout and a palette with page components that you can drag onto the canvas to add to the page. The Designer has a Property Inspector that you use to specify the properties of the page's components and to open Quick Starts. See Use the Page Designer and About Quick Starts. The Designer is only available with page artifacts.
	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 and types. See About Variables and Types.
	The Actions editor displays a list of the action chains that are defined within the scope of the artifact. You can use the Actions editor to create new action chains and to open action chains in the editor. See About Action Chains.
	The Events editor displays a list of lifecycle and 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 with an Event.
	The Settings editor contains tabs for editing an artifact's settings. The options available depend upon the artifact. The Settings editors for flow and application artifacts contain a tab for setting security options for the artifact.
	The HTML editor displays the code for an application's`index.html` file when the application artifact is open in the designer. You use the Code view in the Page Designer to view and edit the HTML of pages in apps.
	The Functions 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.
	The Metadata 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`.