Style Links
OmniOutliner documents can do more than just present data in an ordered and attractive format. Using the link style attribute, outlines can provide their readers the means to reference other documents and materials both locally on their devices and on the internet. In addition, links can interact directly with their OmniOutliner documents and the documents of other Omni applications through the use of Omni Automation script URLs.
The Link Style Attribute
Link (URL) • OmniOutliner styles can be assigned URLs (links) that are triggered when the styled objects are tapped or clicked. The links can be to a webpage or even Omni Automation scripts!
| 01 | url = URL.fromString('https://omni-automation.com') | |
| 02 | aStyle.set(Style.Attribute.Link, url) |
Navigation Style Links to OmniFocus
The following script creates custom named styles whose attributes include links to areas in the OmniFocus application:
if(app.platformName === 'iOS'){
navStyles = [{'name':'OmniFocus-InBox','link':'omnifocus:///inbox'},
{'name':'OmniFocus-Flagged','link':'omnifocus:///flagged'},
{'name':'OmniFocus-Projects','link':'omnifocus:///projects'},
{'name':'OmniFocus-Contexts','link':'omnifocus:///contexts'},
{'name':'OmniFocus-Tags','link':'omnifocus:///tags'},
{'name':'OmniFocus-Forecast','link':'omnifocus:///forecast'},
{'name':'OmniFocus-Review','link':'omnifocus:///review'},
{'name':'OmniFocus-Nearby','link':'omnifocus:///nearby'}]
} else {
navStyles = [{'name':'OmniFocus-InBox','link':'omnifocus:///inbox'},
{'name':'OmniFocus-Flagged','link':'omnifocus:///flagged'},
{'name':'OmniFocus-Projects','link':'omnifocus:///projects'},
{'name':'OmniFocus-Contexts','link':'omnifocus:///contexts'},
{'name':'OmniFocus-Tags','link':'omnifocus:///tags'},
{'name':'OmniFocus-Forecast','link':'omnifocus:///forecast'},
{'name':'OmniFocus-Review','link':'omnifocus:///review'}]
}
nStyles = document.outline.namedStyles.all
titles = nStyles.map(function(nStyle){return nStyle.name})
navStyles.forEach(function(styleObj){
styleTitle = styleObj.name
if (titles.indexOf(styleTitle) == -1){
nStyle = document.outline.namedStyles.add(styleTitle)
url = URL.fromString(styleObj.link)
nStyle.set(Style.Attribute.Link, url)
}
})
omnioutliner://localhost/omnijs-run?script=navStyles%20%3D%20%5B%7B%27styleName%27%3A%27OmniFocus-InBox%27%2C%27styleLink%27%3A%27omnifocus%3A%2F%2F%2Finbox%27%7D%2C%0A%7B%27styleName%27%3A%27OmniFocus-Flagged%27%2C%27styleLink%27%3A%27omnifocus%3A%2F%2F%2Fflagged%27%7D%2C%0A%7B%27styleName%27%3A%27OmniFocus-Projects%27%2C%27styleLink%27%3A%27omnifocus%3A%2F%2F%2Fprojects%27%7D%2C%0A%7B%27styleName%27%3A%27OmniFocus-Contexts%27%2C%27styleLink%27%3A%27omnifocus%3A%2F%2F%2Fcontexts%27%7D%2C%0A%7B%27styleName%27%3A%27OmniFocus-Tags%27%2C%27styleLink%27%3A%27omnifocus%3A%2F%2F%2Ftags%27%7D%2C%0A%7B%27styleName%27%3A%27OmniFocus-Forecast%27%2C%27styleLink%27%3A%27omnifocus%3A%2F%2F%2Fforecast%27%7D%2C%0A%7B%27styleName%27%3A%27OmniFocus-Review%27%2C%27styleLink%27%3A%27omnifocus%3A%2F%2F%2Freview%27%7D%5D%0A%0AnStyles%20%3D%20document%2Eoutline%2EnamedStyles%2Eall%0Atitles%20%3D%20nStyles%2Emap%28function%28nStyle%29%7Breturn%20nStyle%2Ename%7D%29%0A%0AnavStyles%2EforEach%28function%28styleObj%29%7B%0A%09styleTitle%20%3D%20styleObj%2EstyleName%0A%09if%20%28titles%2EindexOf%28styleTitle%29%20%3D%3D%20-1%29%7B%0A%09%09nStyle%20%3D%20document%2Eoutline%2EnamedStyles%2Eadd%28styleTitle%29%0A%09%09url%20%3D%20URL%2EfromString%28styleObj%2EstyleLink%29%0A%09%09nStyle%2Eset%28Style%2EAttribute%2ELink%2C%20url%29%0A%09%7D%0A%7D%29
| Add OmniFocus Navigation Styles | ||
| 01 | navStyles = [{'name':'OmniFocus-InBox','link':'omnifocus:///inbox'}, | |
| 02 | {'name':'OmniFocus-Flagged','link':'omnifocus:///flagged'}, | |
| 03 | {'name':'OmniFocus-Projects','link':'omnifocus:///projects'}, | |
| 04 | {'name':'OmniFocus-Contexts','link':'omnifocus:///contexts'}, | |
| 05 | {'name':'OmniFocus-Tags','link':'omnifocus:///tags'}, | |
| 06 | {'name':'OmniFocus-Forecast','link':'omnifocus:///forecast'}, | |
| 07 | {'name':'OmniFocus-Review','link':'omnifocus:///review'}] | |
| 08 | ||
| 09 | nStyles = document.outline.namedStyles.all | |
| 10 | titles = nStyles.map(function(nStyle){return nStyle.name}) | |
| 11 | ||
| 12 | navStyles.forEach(function(styleObj){ | |
| 13 | styleTitle = styleObj.name | |
| 14 | if (titles.indexOf(styleTitle) == -1){ | |
| 15 | nStyle = document.outline.namedStyles.add(styleTitle) | |
| 16 | url = URL.fromString(styleObj.link) | |
| 17 | nStyle.set(Style.Attribute.Link, url) | |
| 18 | } | |
| 19 | }) | |
More information about using URLs with OmniFocus is available here.
Using Web Links in Styles
The following script shows how to set the style of all occurrences of a specific word in an outline document. In this case, the word “iPad” is styled with a named style that includes a link to Apple’s iPad webpage.
styleTitle = 'iPad Link'
if (document.outline.namedStyles.byName(styleTitle) === null){
nStyle = document.outline.namedStyles.add(styleTitle)
nStyle.set(Style.Attribute.FontFillColor, Color.blue)
url = URL.fromString("https://www.apple.com/ipad")
nStyle.set(Style.Attribute.Link, url)
}
var aStyle = document.outline.namedStyles.byName(styleTitle)
topicColumn = document.outline.outlineColumn
rootItem.apply(function(item){
if (item != rootItem){
textObj = item.valueForColumn(topicColumn)
wordRanges = textObj.ranges(TextComponent.Words)
wordRanges.forEach(function(range){
if(textObj.textInRange(range).string === 'iPad'){
size = textObj.styleForRange(range).get(Style.Attribute.FontSize)
aStyle.set(Style.Attribute.FontSize, size)
textObj.styleForRange(range).setStyle(aStyle)
}
})
}
})
omnioutliner://localhost/omnijs-run?script=styleTitle%20%3D%20%27iPad%20Link%27%0Aif%20%28document%2Eoutline%2EnamedStyles%2EbyName%28styleTitle%29%20%3D%3D%3D%20null%29%7B%0A%09nStyle%20%3D%20document%2Eoutline%2EnamedStyles%2Eadd%28styleTitle%29%0A%09nStyle%2Eset%28Style%2EAttribute%2EFontFillColor%2C%20Color%2Eblue%29%0A%09url%20%3D%20URL%2EfromString%28%22https%3A%2F%2Fwww%2Eapple%2Ecom%2Fipad%22%29%0A%09nStyle%2Eset%28Style%2EAttribute%2ELink%2C%20url%29%0A%7D%0Avar%20aStyle%20%3D%20document%2Eoutline%2EnamedStyles%2EbyName%28styleTitle%29%0A%0AtopicColumn%20%3D%20document%2Eoutline%2EoutlineColumn%0ArootItem%2Eapply%28function%28item%29%7B%0A%09if%20%28item%20%21%3D%20rootItem%29%7B%0A%09%09textObj%20%3D%20item%2EvalueForColumn%28topicColumn%29%0A%09%09wordRanges%20%3D%20textObj%2Eranges%28TextComponent%2EWords%29%0A%09%09wordRanges%2EforEach%28function%28range%29%7B%0A%09%09%09if%28textObj%2EtextInRange%28range%29%2Estring%20%3D%3D%3D%20%27iPad%27%29%7B%0A%09%09%09%09size%20%3D%20textObj%2EstyleForRange%28range%29%2Eget%28Style%2EAttribute%2EFontSize%29%0A%09%09%09%09aStyle%2Eset%28Style%2EAttribute%2EFontSize%2C%20size%29%0A%09%09%09%09textObj%2EstyleForRange%28range%29%2EsetStyle%28aStyle%29%0A%09%09%09%7D%0A%09%09%7D%29%0A%09%7D%0A%7D%29
| Apply Named Style to All Occurrences of Word | ||
| 01 | styleTitle = 'iPad Link' | |
| 02 | if (document.outline.namedStyles.byName(styleTitle) === null){ | |
| 03 | nStyle = document.outline.namedStyles.add(styleTitle) | |
| 04 | nStyle.set(Style.Attribute.FontFillColor, Color.blue) | |
| 05 | url = URL.fromString("https://www.apple.com/ipad") | |
| 06 | nStyle.set(Style.Attribute.Link, url) | |
| 07 | } | |
| 08 | var aStyle = document.outline.namedStyles.byName(styleTitle) | |
| 09 | ||
| 01 | topicColumn = document.outline.outlineColumn | |
| 02 | rootItem.apply(function(item){ | |
| 03 | if (item != rootItem){ | |
| 04 | textObj = item.valueForColumn(topicColumn) | |
| 05 | wordRanges = textObj.ranges(TextComponent.Words) | |
| 06 | wordRanges.forEach(function(range){ | |
| 07 | if(textObj.textInRange(range).string === 'iPad'){ | |
| 08 | s = textObj.styleForRange(range).get(Style.Attribute.FontSize) | |
| 09 | aStyle.set(Style.Attribute.FontSize, s) | |
| 10 | textObj.styleForRange(range).setStyle(aStyle) | |
| 11 | } | |
| 12 | }) | |
| 13 | } | |
| 14 | }) | |
Here is a link to the Add “iPad” Links script saved as an OmniOutliner solitary action:
Omni Automation URLs as Style Links
Omni Automaton scripts can be converted into Script URLs and as such may be used in style links.
As an example the following functions are designed to either focus the selected rows or unfocus the current focused items.
function toggleFocus(){
editor = document.editors[0]
if (editor.focusedItems.length != 0){
editor.focusedItems = []
} else {
nodes = editor.selectedNodes
items = nodes.map(function(node){return node.object})
editor.focusedItems = items
}
}
omnioutliner:///omnijs-run?script=function%20toggleFocus%28%29%7B%0A%09editor%20%3D%20document%2Eeditors%5B0%5D%0A%09if%20%28editor%2EfocusedItems%2Elength%20%21%3D%200%29%7B%0A%09%09editor%2EfocusedItems%20%3D%20%5B%5D%0A%09%7D%20else%20%7B%0A%09%09nodes%20%3D%20editor%2EselectedNodes%0A%09%09items%20%3D%20nodes%2Emap%28function%28node%29%7Breturn%20node%2Eobject%7D%29%0A%09%09editor%2EfocusedItems%20%3D%20items%0A%09%7D%0A%7D%0AtoggleFocus%28%29
| Top-Level Style Link: Toggle Focus | ||
| 01 | function toggleFocus(){ | |
| 02 | editor = document.editors[0] | |
| 03 | if (editor.focusedItems.length != 0){ | |
| 04 | editor.focusedItems = [] | |
| 05 | } else { | |
| 06 | nodes = editor.selectedNodes | |
| 07 | items = nodes.map(function(node){return node.object}) | |
| 08 | editor.focusedItems = items | |
| 09 | } | |
| 10 | } | |
function toggleFocusAndExpansion(){
editor = document.editors[0]
if (editor.focusedItems.length != 0){
editor.focusedItems = []
rootItem.children.forEach(function(item){
node = editor.nodeForItem(item)
node.collapse()
})
} else {
nodes = editor.selectedNodes
nodes[0].expand(true)
items = nodes.map(function(node){return node.object})
editor.focusedItems = items
}
}
omnioutliner:///omnijs-run?script=function%20toggleFocusAndExpansion%28%29%7B%0A%09editor%20%3D%20document%2Eeditors%5B0%5D%0A%09if%20%28editor%2EfocusedItems%2Elength%20%21%3D%200%29%7B%0A%09%09editor%2EfocusedItems%20%3D%20%5B%5D%0A%09%09rootItem%2Echildren%2EforEach%28function%28item%29%7B%0A%09%09%09node%20%3D%20editor%2EnodeForItem%28item%29%0A%09%09%09node%2Ecollapse%28%29%0A%09%09%7D%29%0A%09%7D%20else%20%7B%0A%09%09nodes%20%3D%20editor%2EselectedNodes%0A%09%09nodes%5B0%5D%2Eexpand%28true%29%0A%09%09items%20%3D%20nodes%2Emap%28function%28node%29%7Breturn%20node%2Eobject%7D%29%0A%09%09editor%2EfocusedItems%20%3D%20items%0A%09%7D%0A%7D%0AtoggleFocusAndExpansion%28%29
| Toggle Focus and Expansion | ||
| 01 | function toggleFocusAndExpansion(){ | |
| 02 | editor = document.editors[0] | |
| 03 | if (editor.focusedItems.length != 0){ | |
| 04 | editor.focusedItems = [] | |
| 05 | rootItem.children.forEach(function(item){ | |
| 06 | node = editor.nodeForItem(item) | |
| 07 | node.collapse() | |
| 08 | }) | |
| 09 | } else { | |
| 10 | nodes = editor.selectedNodes | |
| 11 | nodes[0].expand(true) | |
| 12 | items = nodes.map(function(node){return node.object}) | |
| 13 | editor.focusedItems = items | |
| 14 | } | |
| 15 | } | |
These functions can be combined in a script that is converted into a script URL that is assigned to the top-level style as a link. When a TAP|CLICK is applied to a top=level item, it will set the focus to the item.
scriptText = "omnioutliner:///omnijs-run?script=editor%20%3D%20document%2Eeditors%5B0%5D%0Aif%20%28editor%2EfocusedItems%2Elength%20%21%3D%200%29%7B%0A%09editor%2EfocusedItems%20%3D%20%5B%5D%0A%09rootItem%2Echildren%2EforEach%28function%28item%29%7B%0A%09%09node%20%3D%20editor%2EnodeForItem%28item%29%0A%09%09node%2Ecollapse%28%29%0A%09%7D%29%0A%7D%20else%20%7B%0A%09nodes%20%3D%20editor%2EselectedNodes%0A%09nodes%5B0%5D%2Eexpand%28true%29%0A%09items%20%3D%20nodes%2Emap%28function%28node%29%7Breturn%20node%2Eobject%7D%29%0A%09editor%2EfocusedItems%20%3D%20items%0A%7D"
scriptURL = URL.fromString(scriptText)
aStyle = document.outline.levelStyle(0)
aStyle.set(Style.Attribute.Link, scriptURL)
omnioutliner:///omnijs-run?script=scriptText%20%3D%20%22omnioutliner%3A%2F%2F%2Fomnijs-run%3Fscript%3Deditor%2520%253D%2520document%252Eeditors%255B0%255D%250Aif%2520%2528editor%252EfocusedItems%252Elength%2520%2521%253D%25200%2529%257B%250A%2509editor%252EfocusedItems%2520%253D%2520%255B%255D%250A%2509rootItem%252Echildren%252EforEach%2528function%2528item%2529%257B%250A%2509%2509node%2520%253D%2520editor%252EnodeForItem%2528item%2529%250A%2509%2509node%252Ecollapse%2528%2529%250A%2509%257D%2529%250A%257D%2520else%2520%257B%250A%2509nodes%2520%253D%2520editor%252EselectedNodes%250A%2509nodes%255B0%255D%252Eexpand%2528true%2529%250A%2509items%2520%253D%2520nodes%252Emap%2528function%2528node%2529%257Breturn%2520node%252Eobject%257D%2529%250A%2509editor%252EfocusedItems%2520%253D%2520items%250A%257D%22%0AscriptURL%20%3D%20URL%2EfromString%28scriptText%29%0AaStyle%20%3D%20document%2Eoutline%2ElevelStyle%280%29%0AaStyle%2Eset%28Style%2EAttribute%2ELink%2C%20scriptURL%29
| Assign Script to Top-Level Style | ||
| 01 | scriptText = "omnioutliner:///omnijs-run?script=editor% | |
| 02 | scriptURL = URL.fromString(scriptText) | |
| 03 | aStyle = document.outline.levelStyle(0) | |
| 04 | aStyle.set(Style.Attribute.Link, scriptURL) | |
Video
In the following video, the Toggle Focus and Expansion script has been encoded to an Omni Automation URL and used as the value for the link property of the top level style: levelStyle(0)
When a top-level outline items is selected and a TAP|CLICK applied, the item will become focused, fully expanding and while all other outline items are hidden. When a second TAP|CLICK is applied to the item, all top-level outline items will be displayed with their content collapsed.
UNDER CONSTRUCTION
This webpage is in the process of being developed. Any content may change and may not be accurate or complete at this time.
DISCLAIMER