Section

Section

This type of container is made up of cells that can be divided into rows, columns, and even smaller sections.  This is where you can drag and drop objects and fields, and order them the way you want them to appear on the live screen.  Each section has a properties menu that appears on the right nav when you select the section on your canvas, divided into settings and style.

Settings

  • Caption: this allows you to name the section. This will show up on the canvas, but most importantly, allows you to reference it when adding actions. Section names are unique.
  • Show Header/Title Bar: Checking this will show the caption on the live screen as well as a header bar which will allow a Method user to expand and collapse the section. Unchecking will hide the header/title bar.
  • Load State: This determines the load state the section will be in when the live screen loads.
    • Regular - load the section as normal.
    • Collapsed - section is collapsed when the screen loads and would need to be manually expanded.
    • Hidden - section is hidden on the live screen (which is great for sections containing fields and objects that are working in the background of your screen and don’t require user input).  
    • Disabled - section and its components are visible on the live screen, but they’re “greyed out” and not accessible.
  • Responsive Layout: If you have ever seen a website that automatically changes its own layout as you resize the window to adapt for more or less visual real estate, that's responsive layout. A section will collapse its cells when set to responsive 
    • Don't Collapse - section will not collapse 
    • Collapse for tablet & phone - section will collapse on tablet and phone
    • Collapse for phone - section will only collapse for phones, not tablet
  • Section Width: This is exactly what you think it is: a tool to allow you to manipulate the width of the section based on either pixels or percentage of the total screen. The vertical height of a section is dictated by how much stuff you put in it, so there’s no tool for manipulating that dimension.

Style

A note on the style section: Method’s color palette assigns names to their colors that denote where our best practice says they’d be most useful - so instead of calling it “red”, we call it “alert” and so on. They’re designed to make sense and keep your app looking great (and in step with Method’s suite of existing apps)!
  • Section - Background color: This will color the background of ONLY this section.
  • Header Colors: This gives you the option of customizing everything about your header: the background color, the color of the header text, the text size and alignment.  Keep in mind this will only be visible if you’ve chosen to make the header visible - there’s not much point in customizing this if you’re just going to hide the header.
  • Header Border (top, bottom, left, right): Yes, you can assign borders to a header, and then choose their size (in pixels), color (from the same standardized palette as the background colors), and style (dash, dotted, double, or solid).
  • Toggle Arrows: Here’s a fun option! Toggle arrows are used to collapse and expand sections, so Method gives you the ability to customize their look and location. 
    • Toggle Arrows - Choose between Regular/Chevron/Circle Chevron/Circle Arrow/Angle Arrow/Double Angle Arrow
    • Toggle Arrow Alignment - This option lets you place the arrow on the extreme right-hand side of your section, to the right of the section header text, or to the extreme left.
Your toggle arrow will disappear if you hide your header, so if you want your toggle arrow to appear but you don’t want a section title, just leave your caption blank!  Then you can set your toggle arrow to the right or the left as you prefer (obviously right of text will just default to left if there’s no text!)
  • Toggle Arrow Colors: Change the color of your toggle arrow (from the same standardized palette as the background colors)
  • Padding: Padding clears a space around objects, cells, and sections.  The available options are none, 1x, and 2x (2x being the largest possible padding) and you can implement this for the left, right, top and bottom of the section.
  • Border: Just like the section header, you can put a border around the whole section.  And just like the section header, you can choose the size, color and style for the top, bottom, left, and right borders as necessary.

Section cell

If you are familiar with Microsoft Excel or other spreadsheet programs, you already know what cells are - they’re the little boxes that make up rows and columns.  Since sections can be assigned rows and columns, that means sections can have cells - and each cell can be individually configured!

Settings

  • Cell Alignment: This actually refers to the objects and fields inside the cell - you can align them to the top, bottom, left, right, or any of the four corners.
  • Row Height: Change the height of the row your cell is located in, in pixels or percent of the total section.  This will apply to all cells in this row.
  • Column Width: Change the width of the column your cell is located in, in pixels or percent of the total section.  This will apply to all cells in this column.
  • Checkbox Collapse as small as possible: This checkbox will shrink your cell down to the minimum size it can possibly be while still containing the controls you’ve dragged into it.  Keep in mind this only refers to column width, not row height.

Style

The style properties for the cells are exactly the same as the ones for the section itself - they just pertain strictly to the cell you’ve selected.  Keep in mind you can’t select and make changes to multiple cells at once - each cell must be customized individually.  

  • Section Cell: Background Color
  • Padding: Left/Right/Top/Bottom
  • Top Border: Size, Color, Style
  • Bottom Border: Size, Color, Style
  • Left Border: Size, Color, Style
  • Right Border: Size, Color, Style

[top]

Was this article helpful?

Can’t find what you’re looking for?

Contact Us