Level Styles

As previously mentioned, there are three categories of styles: Whole Document (base style), Level Styles, and Named Styles. In this section, we’ll examine how to change the look of a row based upon its level, or position in the document outline.

The levelStyles Property

The value of the levelStyles property of the Outline class is an array of the styles used by default for Items at different nesting levels in the document. The length of this array will be the larger of the currently defined number of level styles or the maximum nesting level of Items in the Outline.

Level Styles


document.outline.levelStyles.length

DO THIS ►

Enter and run the example script in the Console window.

Because our outline currently has two levels of data (planets and moons), the result of the script execution will be the integer: 2

NOTE: Since no level styles have yet been defined, the style attributes of the base style (baseStyle) are in effect.

Reveal the document sidebar by pressing the Sidebar button in the toolbar. Press the Styles tab, and all of the document styles, including the two level styles, will be listed.

Editing a Level Style

To edit a level style, use the levelStyle(…) method which returns a reference to the level style for the specified nesting level, possibly extending the levelStyles array.

Let’s use this method to change some of the style attributes of the top-level level style. Note that since JavaScript indexes arrays beginning with zero (0), the first level style will be: levelStyle(0)

omnioutliner:///omnijs-run?script=style0%20%3D%20document%2Eoutline%2ElevelStyle%280%29%0Astyle0%2Eset%28Style%2EAttribute%2EFontSize%2C24%29%0Astyle0%2Eset%28Style%2EAttribute%2EFontFamily%2C%27Chalkboard%20SE%27%29

Edit 1st-Level Style
 

style0 = document.outline.levelStyle(0)
style0.set(Style.Attribute.FontSize,24)
style0.set(Style.Attribute.FontFamily,'Chalkboard SE')

DO THIS ►

Enter and run the example script in the Console window.

The indicated styling will be applied to the top-level rows. Reveal the sidebar and inspector panels, and select the Level 1 style to see the applied results:

As we just did, let’s use the levelStyle() method to change some of the style attributes of the second-level level style. Note that since JavaScript indexes arrays beginning with zero (0), the second level style will be: levelStyle(1)

omnioutliner:///omnijs-run?script=style1%20%3D%20document%2Eoutline%2ElevelStyle%281%29%0Astyle1%2Eset%28Style%2EAttribute%2EFontSize%2C18%29%0Astyle1%2Eset%28Style%2EAttribute%2EFontFamily%2C%27Times%20New%20Roman%27%29

Edit 2nd-Level Style
 

style1 = document.outline.levelStyle(1)
style1.set(Style.Attribute.FontSize,18)
style1.set(Style.Attribute.FontFamily,'Times New Roman')

DO THIS ►

Enter and run the example script in the Console window.

The indicated styling will be applied to the second-level rows.

DO THIS ►

To view the results, execute the following script to expand all rows.

omnioutliner:///omnijs-run?script=nodes%20%3D%20document%2Eeditors%5B0%5D%2ErootNode%2Echildren%0Anodes%2EforEach%28function%28node%29%7B%0A%09if%28node%2EcanExpand%29%7Bnode%2Eexpand%28true%29%7D%0A%7D%29

Expand Outline
 

nodes = document.editors[0].rootNode.children
nodes.forEach(function(node){
	if(node.canExpand){node.expand(true)}
})

DO THIS ►

To consolidate the results, execute the following script to focus only the checked rows.

NOTE: The script uses the apply() function that iterates every item in the outline, to check their status.

omnioutliner://localhost/omnijs-run?script=editor%20%3D%20document%2Eeditors%5B0%5D%0AcheckColumn%20%3D%20document%2Eoutline%2EstatusColumn%0AcheckedItems%20%3D%20new%20Array%28%29%0Aeditor%2ErootNode%2Eapply%28%0A%09function%28node%29%7B%0A%09%09state%20%3D%20node%2EvalueForColumn%28checkColumn%29%0A%09%09if%20%28state%20%3D%3D%3D%20State%2EChecked%29%7B%0A%09%09%09checkedItems%2Epush%28node%2Eobject%29%0A%09%09%7D%0A%09%7D%0A%29%0Aif%28checkedItems%2Elength%20%3E%200%29%7B%0A%09editor%2EfocusedItems%20%3D%20checkedItems%0A%7D

Focus Checked Items
 

editor = document.editors[0]
checkColumn = document.outline.statusColumn
checkedItems = new Array()
editor.rootNode.apply(
	function(node){
		state = node.valueForColumn(checkColumn)
		if (state === State.Checked){
			checkedItems.push(node.object)
		}
	}
)
if(checkedItems.length > 0){
	editor.focusedItems = checkedItems
}

What’s Next?

In the next section we’ll learn how to add a script to the Automation menu by creating and installing a plug-in.