App Developer's UI¶

Overview¶

The app developer's UI comprises various pages, dialogs, and elements seen at different stages of app development, and one element, the Jitterbit Harmony Portal header, that is always visible:

• Jitterbit Harmony Portal header: Common to all app developer's UI pages is the Jitterbit Harmony Portal header:

  

  The Harmony Portal header has the following elements:

  • Harmony Portal menu: Click to open the Harmony Portal menu and access other Jitterbit products.

  • Jitterbit logo: Click to navigate to the Harmony Portal landing page.

  • App Builder logo: Click to navigate to the apps page.

  • Account menu: Click to open the account menu.

  • Organization menu: Click to change the selected organization.

  • Help: Click to see links to help resources.

• Apps page: Before building an app, the apps page lists previously built apps (if any), and provides a button to create new ones, either from scratch or a template. (This is the first page you see when launching App Builder from the Jitterbit Harmony Portal.)

  The apps page, visible before creating an app, showing tiles for previously created apps:

  

  An empty apps page, before any apps have been created:

  

• App settings: The app settings dialog opens when creating a new app from scratch.

• Build pages: Once you save an app's settings, you will see the first of various build pages, the Overview page. All build pages show the App Builder menu, which you use to navigate to different build pages, and the app preview button, which lets you see a working preview of the app you're working on.

  The Overview page:

  

App Builder Menu¶

All build pages are reached via the App Builder menu, which is visible on every build page.

The menu works like this:

• Click Overview to navigate to the Overview page and close any open menu sections.

• Click one of Domain Model, Application Logic, or Configuration to open that section's menu and reveal entries that let you navigate to other build pages. (Opening a menu section closes other open sections.)

The width of the menu changes as you adjust your browser's window size. You can manually toggle the menu's width using the open/close button under it:

Wide menu	Narrow menu