Skip to main content

OrgChart Help Guide

Box Layout Editor

Audience:

Audience: Administrators & Read/Write Users

Overview

Administrators and Read/Write users can edit Box Styles using the Box Layout Editor .The following article provides a schema for navigating the Box Layout Editor.

Accessing the Box Layout Editor

Click on the Mode Switcher icon in the Top Toolbar, and then select the Setup option. The Setup panel is displayed.

Click on the View Manager tile. The View Manager user interface is displayed.

Setup_View_Manager_Select.png

Click on the Box Styles button. The Box Styles panel is displayed to the right of the screen.

Show_Box_Styles_View_Manager_5_3_1.png

Right-click on an existing box style, and then select the 5_2_BoxStyles_PencilIcon.pngEdit icon from the dropdown menu.

Adding Fields to a Box Style

There are many tools available for Administrators and Read/Write users to edit and customize a Box Style.

Before you stylize a box, you may want to add additional or alternative fields to display.

To display additional fields, use the Row and Column tools to add more cells. Then, right click on a cell, and select the field or formula you'd like to display.

To display an alternative field, right click on the cell containing the field or formula you'd like to replace, and then select a different one from the dropdown menu.

BLE_5_3_1_add_a_new_field.png
Editing a Box Style

The following tools are available in the Box Layout Editor top toolbar:

BLE_TopToolBar.png
Tools
BLE_SelectTool.png

Click to select a cell. Right-click within a cell to search for a field.

BLE_Pan.png

Click and drag to pan to different areas of the screen.

Box
BLE_BoxShape.png

Change the shape of the selected box.

BLE_BoxFill.png

Change the fill color of the selected box.

BLE_BoxShaddow.png

Turn box shadow effect on/off.

BLE_BorderStyle.png

Change the border thickness and style for selected box.

BLE_BorderColor.png

Change the border color for the selected box.

Text

The following options pertain to the text within the selected cell(s).

BLE_FontSelector.png

Change the font style.

BLE_FontSize.png

Change the font size.

BLE_TextColor.png

Change the text color.

BLE_CellFill.png

Change the cell color.

BLE_BoldText.png

Bold text.

BLE_ItalicizeText.png

Italicize text.

BLE_UnderlineText.png

Underline text.

BLE_LabelOptions.png

Configure the field label display settings.

  • Value - Display only the field value (i.e., "John Smith")

  • Label: Value - Display the field label, and then the field value, separated by a colon (i.e., "Name: John Smith")

  • Label - Display only the field label (i.e., "Name")

Alignment

The following options pertain to the text within the selected cell(s).

BLE_alignmentTOP.png

Align text to the top.

BLE_AlignmentMIDDLE.png

Align text to the middle.

BLE_AlignmentBOTTOM.png

Align text to the bottom.

BLE_WrapText.png

Make all cell content visible by displaying it on multiple lines.

BLE_AlignementLEFT.png

Align text to the left.

BLE_AlignmentCENTERtext.png

Align text to the middle.

BLE_AlignementTextRight.png

Align text to the right.

BLE_JustifyText.png

Align text to both the right and left margins. Use this option when displaying a field label and a field value within the same cell.

Cell

The following options pertain to the

BLE_ExpandRow.png

Increase row height to fill remaining vertical space in the box.

BLE_sizeImage.png

Set the width and height of the image.

BLE_ImageMask.png

Apply a mask to the selected image.

  • No Mask - Use unmasked image

  • Circular Mask - Fit image to a circular shape

  • Grayscale - Apply a Black & White filter

Rows & Columns

The following options pertain the selected cell(s).

BLE_AddRowAbove.png

Insert cell above

BLE_AddColumnLeft.png

Insert column to the left

BLE_DeleteRow.png

Delete cell

BLE_MergeCells.png

Merge cells

BLE_AddNewRowBelow.png

Insert row below

BLE_AddColumnRight.png

Insert column to the right

BLE_DeleteColumn.png

Delete column

BLE_UnmergedCells.png

Unmerge cells

Symbols

Add Symbols to boxes to signify an employee's status. For example, use the airplane symbol to distinguish an employee as a flight risk.

To add Symbols to a box:

  1. Add a new cell to the box. A Free Text field is added by default.

  2. Double-click on the Free Text cell. The Symbol Picker (shown below) is illuminated.

    BLE_Symbols.png

  3. Click on a symbol to add it to the Free Text cell.

    BLE_FlightRiskExample.png
Close Editor

Save

Apply format changes to the selected Box Style.

Cancel

Exit Box Layout Editor without preserving any changes.

Box Layout Editor: Bottom Tool Bar
BLE_width_and_height_controls_5_3_1.png

Apply Changes to:

Select the scope to which you will apply the changes made while editing in the selected box.

  • Entire Chart

  • Current Subchart

  • Selection

  • Set as default layout

Note

Note: Apply Changes to: is only available after right clicking on an existing employee record within the chart, and then selecting the Box Properties from the dropdown menu.

This option is NOT available when creating a new box style, or editing an existing one from the Shared Box Styles library.

Box Width

Set the width of the box.

  • Fixed

  • Auto (Self)

  • Auto (Smart)

  • Auto (Children)

Box Height

Set the height of the box.

  • Fixed

  • Auto (Self)

  • Auto (Smart)

Gutter

Set the amount of space between the edge of the cells within a box and the box border.

  • Default

  • Custom

Options

Check to preview the box style layout with source data.

Align Cells

Set the positioning of the cells in the current Box Style.

  • Top

  • Middle

  • Bottom

Layout Type

Set the type of box.

  • Standard

  • Container