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


In a Column Layout, the view or container is divided into consistently-sized and spaced columns. By default, there are 12 columns. Each component's width is described only by how many of these columns it spans. Since these columns will grow wider or narrower to accommodate changes in the width of the parent container, elements in a column layout can stretch horizontally. To this end, each component has two properties that control its size and position:

  • height for components in a column layout does not scale with the height of the layout itself. It is specified in pixels, and unlike width will not stretch or shrink based on the parent container. A height of auto will tell a component to keep the same vertical size as other elements in its row.

  • breakpoints contains 3 sets of information about the component's positioning. Which set is used is based on which breakpoint is active (more on breakpoints follows). Each set consists of:

    • name is "sm", "md" or "lg". The name simply corresponds the the breakpoint that the particular set of positioning data refers to.
    • span refers to how many columns wide the entity should be in the current breakpoint.
    • rowIndex and colIndex refer to the X and Y coordinates of the leftmost cell that the element occupies in the given breakpoint.
    • order refers to the order of the element in its row. This property will be set and updated automatically.

On this page ...

IULocgo


Column Container

Easy Screen Flexibility

A Column Layout is a simple approach to what could be termed responsive design - the process of developing the same view, or similar ones, in different ways to seamlessly accommodate everything from phone screens to 4K televisions in a single project and set of pages. 

Breakpoints encapsulate this strategy in Perspective. The column layout offers the opportunity to establish three different versions of your view, which will then be used at different ranges of screen widths. You can find and configure these versions from the top of the Perspective Property Editor for a Column container; they are:

  • Small (default 0 px)
  • Medium (default 480 px)
  • Large (default 996 px)

The px values denote at what minimum screen width (in pixels) the view or container should use a given configuration. Selecting one of the sizes will give you the opportunity to configure component positions and spans for that size. This gives more refined control over how a given view or container scales. A column layout is appropriate when your view or container meets some specific criteria:

  • You don't need your components to scale vertically, outside of the three provided breakpoints.
  • You want to include the same components in the view regardless of screen size.
  • You want the components to behave the same way at any size (in terms of scripting, navigation, bindings, etc.)
  • You don't need screens at different sizes to use different views.

Here is an example of a column view, configured with small, medium, and large breakpoints.

  


Configuring a Column Layout 

The Column container allows you to switch between three different views depending on the size of your Perspective Session. In this example, let's create a data entry form for the company's client list. We'll create a view and add components, then we'll switch between the views to arrange the components for each layout size.

  1. Create a new view using a Column container.

  2. With the new Column container selected, you'll see the column breakpoints at the top of the Property Editor. Set each of the breakpoints to the following:
    1. Small breakpoint - 0
    2. Medium breakpoint - 500
    3. Large breakpoint - 1000

  3. Select the Small breakpoint in the the Property Editor.



    Selecting Breakpoints

    It's important to pay attention to which Breakpoint is selected. Any changes you make will be applied only to the currently selected breakpoint.

  4. Click and drag the square handle on the right side of the view to shrink the width of the container to just under 500 px wide.



  5. Let's add 9 components to the Column container.
    1. Drag a Label component on to the container and expand it to fill all 12 columns in the first row.
    2. Drag a Text Field component on to the container and expand it to fill all 12 columns of the second row.
    3. Repeat Steps a and b until you have four Labels and four Text Fields.
    4. Add a Button component at the bottom of the screen and expand it to fill all 12 columns.



  6. In the Property Editor, update the text property of the Label and Button components and assign them a useful description:
    1. First Label: Company Name
    2. Second Label: City
    3. Third Label: State
    4. Fourth Label: Industry
    5. Button: Add Record



  7. This is a good time to Save your project before continuing!
  8. Now, let's switch to the Medium breakpoint. Select the Medium breakpoint at the top of the Property Editor. Notice that all of the components are still showing, but they are now unorganized.
  9. Using the square handle on the right side of the view, click and drag it to expand the width of the container to approximately 500 px wide. This will give you a better idea of what the view will look like in the browser.
  10. Move the components around so each row has Label and one Text Field.
  11. Set each Label to the first 4 columns, and each Text Field to be the last 8 columns.
  12. Keep the Button component in its own row at the bottom and shrink it to be centered with 8 columns.



  13. Save your project.
  14. Now, select the Large breakpoint in the Property Editor. Once again, you'll notice that the all the components are showing, but they are unorganized.
  15. Using the square handle on the right side of the view, click and drag it to expand the width of the container. This will give you a better idea of what the Large view will look like in the browser.
  16. Move the components around so each row has 2 Labels and 2 Text Fields on each row.
  17. Set each Label to be 2 columns wide and each Text Field to be 4 columns wide.
  18. Keep the Button component on its own row at the bottom and shrink it to be centerd with 4 columns.



  19. Save your project.
  20. Let's launch a Perspective Session to test our breakpoint views. Click on the Page Configuration () icon at the bottom of the Designer window.
  21. Right click on your column container and select the Launch Url.



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

    Small Breakpoint


    Medium Breakpoint


    Large Breakpoint





  • No labels