Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL MANUAL VERSIONS

Ignition 8
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata


The Breakpoint container layout is a fundamentally simple layout, consisting of a single breakpoint, with two child views. In other words, the breakpoint layout offers the opportunity to create two different views that are shown at two distinct ranges of layout widths. 

The breakpoint in the layout is configured by selecting the Small and Large breakpoints at the top of the Perspective Property Editor, then dragging in a subview, container, or component. However, little additional structure is provided; each of the two breakpoint configurations expects a single component, container, or view.

On this page ...

IULocgo


Breakpoint Container


Flexibility without Limits

The breakpoint layout is the most comprehensive choice when you want to develop a project that works for sessions of many shapes and sizes. Unlike column and flex layouts, which offer ways of controlling how a fixed set of components respond to changes in screen size, a breakpoint layout expects two entirely distinct subviews. This makes the breakpoint layout a powerful, but more involved choice of layout.

There are many circumstances that call for this layer of abstraction. Maybe operators using mobile phones need different control options than desktop computers at a coordinating hub. Or more fundamentally, maybe you can't quite pack as much functionality per view into a mobile screen as you can in its desktop counterpart, and need to add a couple more views to your mobile version to bridge the gap. 

A breakpoint layout might be a good idea if you want small and large versions of your session to have:

  • Differing components
  • Differing properties, bindings, or layout behavior
  • Differing navigation options

When designing pages for mobile and desktop applications, it's important to consider not only the type of layout, but if your design fits nicely on a page in a mobile session. Some pages may work for a desktop session, but may not work for a mobile device such as expecting a user to enter data into multiple tables on a mobile session that don't fit seamlessly across a page.


Configuring a Breakpoint Container

A Breakpoint container can switch between two configurations based on how wide the container is. Here is a simple example of creating a Breakpoint layout using two different views. The components on each view are laid out a little differently because they both represent two different distinct ranges of layout widths: small and large. We are going to use the two views below to add as children to our Breakpoint container. Since you can only add a single component to each child in a Breakpoint container, we'll place each of these views, containing multiple components, in their own Embedded View. This example assumes you have a small view and large view already configured.



  1. Create a new view using a Breakpoint container.

  2. Let's configure the Breakpoint container to show the small view when the screen size is narrow, like on your mobile device, and the large view when you're on your desktop.

  3. In the Property Editor, the breakpoint is determined by using the Small and Large properties, or the slider at the top of the Designer workspace. In this example, the Breakpoint is set at 800 px. When the Breakpoint container is sized below minimum width, child position rules will fall back to the next set breakpoint rules.
    1. With the Breakpoint container open, click on the Small property in the Property Editor.
    2. Drag an Embedded View component onto the Breakpoint container.
    3. Select the EmbeddedView in the Project Browser.
    4. Set the path property to the name of your small view (i.e., Sml View) from the dropdown.
    5. Set the Position size property to your small view (i.e., Sml View). Note: The size property allows you to switch which child component it is positioned in.



  4. Now let's repeat the steps above for the large view.
    1. With the Breakpoint container open, click on the Large property in the Property Editor.
    2. Drag an Embedded View component onto the Breakpoint container.
    3. Select the first EmbeddedView_0 in the Project Browser.
    4. Set the path property to the name of your large view (i,e., Big View) from the dropdown.
    5. Set the Position size property to your large view (i.e., Big View).

  5. Now, when you toggle the Small and Large properties in the Property Editor, you'll see the window switch between the two different Small and Large views.




  6. Now, let's open a Perspective Session by clicking on the Page Configuration  icon at the bottom of the Designer window to test your Breakpoint layout.

  7. Right click on your Breakpoint container (i.e., bpview), and click on Launch Url.



  8. With your Perspective Session open, stretch and shrink your browser window. You'll see the views change depending on the width of your browser.




  • No labels