Skip to Content

Panel selection service in Jitterbit App Builder

Panel layout service

The App Builder Panel Layout Service is App Builder's proprietary solution for designing a page once while rendering the page in a user-friendly way on various screen sizes. These screens include, but are not limited to mobile phone screens, tablet screens, and desktop screens.

Following are terms that will aid in understanding the algorithm utilized by the Panel Layout Service:

  • Panel - A panel is the basic building block of a page. There is no screen too small to render a panel. This means that App Builder will always display a single panel at the very least. A panel contains information to be presented to the user. The information may be a collection of rows of data, or it may be a single record of data. It can be formatted in a structured way, tabular (in both a horizontal tabular format or a vertical tabular format) or it may be unstructured in a user-defined custom format.

  • Page - A page is a collection of panels. A single page, might have one panel, or it might have greater than one panels.

  • Layout - The layout of a page defines how panels should be displayed when they are all visible on the screen. For example, some panels stacked vertically (panel A is above panel B), some panels might be stacked horizontally (panel A is to the left of panel B). We also allow grouping of panels such that panel A and panel B can be side by side while being above panel C. In this scenario, panel A and panel B would be in their own grouping.

  • Slide - A slide is a subset of panels to be rendered on a screen. When all panels do not fit on the screen, App Builder will render the correct subset of panels as a slide and allow the end user to flick between slides, effectively flicking between subsets of panels.

  • Screen Size - Screen sizes are traditionally measured in pixel heights and pixel widths. App Builder converts pixel heights and widths into available panels. How many panels can we fit on the screen vertically? How many panels can we fit on the screen horizontally? If the screen will fit 1 panel, then we consider that screen to be 1x1 (1 panel high, 1 panel wide). If the screen is wider and will fit 2 panels wide, but 1 panel high, then we consider the screen 1x2 (1 panel high, 2 panels wide). The calculations for determining how many panels will fit on a screen are described later in the document.

App Builder uses a Page and its layout to determine which panels to render on the screen and where to render them. Depending on screen size, App Builder may reduce the number of panels rendered on the screen, while honoring the layout. It is the Panel Layout Service that makes the decision on which panels to omit from the screen, and how to layout the remaining panels.

In the event that the Panel Layout Service omits panels from the screen, it creates a collection of Slides. Each Slide contains a subset of panels, laid out according to the designer defined Layout. The user might initially see the first Slide and have the ability to flick to any additional slides to see more panels.

The following image depicts the algorithm used by the Panel Layout Service to layout panels on various screen sizes:

Image 2015 5 18 7 28 5

Image 2015 5 18 7 28 21

Screen Sizes are determined as follows:

The ideal panel height is X * Y, where Y is equivalent to 1 EM of a character of text. This is another way of saying X characters of text. Any screen, by definition can fit at least one panel high. However, if the screen has enough room to render 2 * X characters of text, then we allow it to render 2 panels high. Knowing the height of the screen in pixels, App Builder determines how many lines of text it can fit, and then how many panels it can fit.

X = Configuration - Minimum Panel Height - Default = 24

Ideal Panel Height = 24 * 1 EM in Pixels

Number of Panels High = Floor(View port Height in Pixels / Ideal Panel Height), where Number of Panels High not go below 1.

Similar math is used to determine ideal panel width.

Ideal Panel Width = 24 * 1 EM in Pixels

Number of Panels Wide = Floor(View port Width in Pixels / Ideal Panel Width), where Number of Panels Wide not go below 1.