CMS Basics: Edit Panel - Working with 'Boxed Sets' - University of Houston
Skip to main content

Edit Panel - Working with 'Boxed Sets'

Quick summary:

Recognizing which editing sections, or 'Boxed Sets', in the Edit panel are parent items and which are nested child items can make your Cascade CMS editing life a lot easier. Close up any sections you're not using to reduce scrolling and to make it easier to find what you need. 

Parent:Child Nesting Outline-Style | Collapsing and Expanding Boxed Sets | Duplicating and Re-ordering Boxed Sets | Other Notes and Tips |


Parent:Child Nesting Outline-Style

Relative Parent:Child relationships in Edit panel segments can be seen through each segment's header bar and the leader-line which drops down from the left edge of that header bar.

In the image following, the leader lines have been darkened for illustration purposes, and the Parent:Child relationships for various segments and sub-segments have been noted on the illustration.

boxed-sets---parent-child-sub-sections-leader-lines-2024-02-01-at-4.30.27-pm.png

The length of the leader-line defines the full depth of the segment. Thus, the leader-line indicates what all is grouped together within that specific segment, and can be seen as defining one complete 'boxed set'. Everything encompassed by a 'boxed set' may be considered descendent to its parent box.

The example from the image above shows a typical "Section" from a Landing-type page's Edit panel, with the "Standard Content" Section Type, Stats List sub-type elected. The Stats List options then appear under (within) that segment. In the illustration, Item 1 of 5 can be seen to be one whole 'boxed set', as its leader-line stops directly above the header bar for its same-type peer, Item 2 of 5. Item 1 of 5 is a direct child box of the Stats List boxed set, and so on.

Outline form nesting

In outline form, the illustrated Section's nested boxes parent:child relationships might look like this:

  1. Section (main parent level)
    1. Standard Content (child)
      1. Stats List (grandchild)
        1. Item 1 of 5 (great-grandchild)
          1. content elections (In this example, content elections do not include any further descendent/child 'boxes', so this is the deepest level.)

Peer pieces will all have the same relative-parent box, and if they are all the same type of segment, will also each have the same default options, such as with the Stats List's five (5) peer child Items in the following outline:

  1. Section 
    1. Standard Content
      1. Stats List (relative-parent for its five child items)
        1. Item 1 of 5
          1. Number text field
          2. Category text field
        2. Item 2 of 5
          1. Number text field
          2. Category text field
        3. Item 3 of 5
          1. Number text field
          2. Category text field
        4. Item 4 of 5
          1. Number text field
          2. Category text field
        5. Item 5 of 5
          1. Number text field
          2. Category text field


Collapsing and Expanding Boxed Sets 

In the Edit panel, any segment with a header bar and its own left-hand side leader line will be collapsible / expandable. Each level of nested boxes can be collapsed/expanded separately within its relative parent, by clicking on that segment's specific header bar.

leader-line-nesting-and-peer-sets.pngRemember that parent:child relationships are always relative, and many levels of nesting may mean the parent level you are interested in may be difficult to find. Follow a segment's closest leader line up to the segment's header bar. More than one parallel leader line next to a segment in the Edit panel indicates nested boxed sets. The more parallel leader lines there are next to a segment, the deeper the box is nested.

Hint: if you are seeing nested boxes' header bars which indicate they have multiple peers, you have not yet collapsed their primary parent box.

Top-level boxes have an additional collapse/expand toggle

In addition to a box's header bar, a top-level box (e.g. the Landing-type page's "Sections") may also be collapsed by clicking a button at the very bottom of the box. So, if you see a Collapse Button, that is a higher-level item which likely has multiply-nested child items. If you want to get the cleanest Edit panel you can, close up boxed sets at the highest level first, then find the boxed set parent you're interested in and work inwards.

The image for the next topic, Duplicating and Re-ordering Boxed Sets, illustrates "Section" header bars and collapse/expand buttons from a Landing-type page, as well as providing notes on duplicating boxed sets within an Edit panel.


Duplicating and Re-ordering Boxed Sets

boxed-sets---sections---top-header-bar-and-bottom-handle-2024-02-01-at-4.32.30-pm.png

Not all boxed sets can be duplicated

A "plus sign" character [ + ] at the right-side of any boxed set's header bar indicates that particular segment, or 'boxed set", can be duplicated in whole. No "plus sign", no duplication.

Each new same-type peer box created in this way will contain all the same default sub-options as the original, only "blank" (showing only default elections, and empty of any content). 

In the image above, the "Standard Content" boxed set does not yet have any duplicates, aka peers of the same kind, or same type [shows only a "plus sign" button at the right-hand side of its header bar]; however, clicking the Plus Sign button would create a new same-type peer boxed set directly below the original.

Re-ordering tools only appear where there are multiple same-type peer boxed sets

Once multiple same-type peer boxes are present, as they are at the higher "Section" level in the illustration above, then additional information and buttons will appear in each peer box's header bar:
Illustration of an editing segment's header bar showing at the right side some rank-in-set numbers, re-ordering arrows, a green plus sign for duplication, and a red X for segment removal.

  • Numbers, indicating the box's rank amongst its peers, and how many peer boxes exist within their parent area.
    In the illustration above, each "Section" header bar indicates there are 16 peer boxes total. The illustration shows header bars for: "3 of 16" (fully collapsed); "4 of 16" (fully collapsed); "5 of 16" (expanded to show only one level of its 2 nested peer sub-boxes); and "6 of 16" (showing only the header bar, but with an up-pointing carat symbol indicating that the section is expanded, but not visible in the illustration).
  • Arrow button[s] to change the peer boxes' order ranking. A lower-numbered box's content would appear on the final webpage above a higher-numbered box's content.
  • Plus Sign button will still be present for any item which can be duplicated, allowing other peer items to be created. New peer box will appear directly below the box from which it was duplicated, and will be blank, offering the same default options as the original without specific elections or content.
    Note: in future versions of Cascade, there is expected to be an option to Copy a boxed set, with all the same elections and content, to make it easier to re-purpose an existing setup.
  • "X" button, allowing its segment's whole boxed set to be removed.


Other Notes and Tips

The Cascade CMS Edit panel gives you the tools and options you need to create great looking, engaging, and responsive webpages. However, it may take a complex setup in the Edit panel to accomplish that effect you are aiming for. 

As complex options and sub-options are selected, or even if you simply add new items through duplication, you will likely see the Cascade interface 'redraw' the screen as it prepares the new view, creating momentary visual distractions. Keeping track of which level of which 'boxed set' you are working with can help you re-focus and re-orient more quickly. 

Please note that even though the Landing-type page examples discussed above indicate an edit panel with 16 different top-level Sections, that is an unusually large number of Sections and was intended for illustration purposes only. Typically, you can accomplish your design goals with 7 or fewer Sections, and sometimes, not uncommonly, with only one Section per se in combination with the other page setup options.

So again, in summary, identifying 'boxed sets' and parent:child nesting, as well as learning to collapse/expand only what you need to work with at the moment, can simplify your view, make it easier to find what you need, and allow you to achieve your vision faster.

 


 return to top