OrgChart Now Help Guide

Box Layout Editor

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 5_2_Mode.png in the top-left corner of the screen, and then select the View Manager option.

The View Manager User Interface is displayed.

Click on the Box Styles button, and then click on the Shared library tab (at the top of the Box Styles side panel).

ViewManager_UserInterface_BoxStyles.png

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

The Box Layout Editor is displayed.

5_2_ViewManager_BoxLayoutEditor.png
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 do so, right click on a cell, and then select a Field or Formula from the dropdown menu to add it to the Box Style.

BoxStyles_SearchforField.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_Marquee.png

Click to select elements within a defined rectangle.

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 the Free Text field to a cell.

  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_BottomToolBar.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.

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 a selected cell

  • Top

  • Middle

  • Bottom

Layout Type

Set the type of box

  • Standard

  • Container