Formatter
OmniOutliner provides controls for determining how data is displayed as text in your document. For example, an outline may contain columns that display numeric values as percentages or as currency values. Or a column may contain dates, whose representation could be altered to display them in many ways, from long format (Sunday, October 1, 2017) to short format (10/1/17), or any customized variation.
Scripts use the Formatter class to determine and control the formatting for columns in an outline. Specifically, there are three types of Formatters scripts can use:
This webpage describes how to create and apply formatters, especially when adding columns to an OmniOutliner outline.
Date Formatter
This first section will examine how create and use Date Formatters, especially when applying their format to columns.
Before we cover the Date Formatter, it is important to mention the JavaScript’s built-in Date object. The Date object can be used to generate date strings and date objects, and is fully documented at the w3cschools.com website.
When used as a class method Date() the result will be a string. When used as a constructor new Date() the result will be a date object. (see below)
JavaScript Date() Method and Constructor | ||
01 | typeof Date() | |
02 | //-> string | |
03 | typeof new Date() | |
04 | //> object |
The JavaScript Date Object is often used in scripts to generate a string or object for the current date.
Date Formatter Class Properties
Here are the properties of the Formater.Date class:
iso8601 (Formatter.Date r/o) • Return a date formatter that produces ISO–8601 formatted dates, using the Gregorian calendar and the UTC time zone.
Add a Date Column | ||
01 | var newColumn = document.outline.addColumn( | |
02 | Column.Type.Date, | |
03 | document.editors[0].afterColumn(document.outline.outlineColumn), | |
04 | function(column){ | |
05 | column.title = "Date" | |
06 | column.formatter = Formatter.Date.iso8601 | |
07 | } | |
08 | ) |
Date Formatter Instance Properties
Here are the properties of an instance of the Formater.Date class:
calendar (Calendar) • The instance of the Calendar class currently used by the formatter.
dateFormat (String r/o) • A string indicating the text formatting of the date result. For example: M/d/yy
locale (Locale) • An instance of the Locale class that represents one of the standard localities.
timeZone (TimeZone) • An instance of the Timezone class representing one of the standard time zones.
Add a Date Column | ||
01 | var newColumn = document.outline.addColumn( | |
02 | Column.Type.Date, | |
03 | document.editors[0].afterColumn(document.outline.outlineColumn), | |
04 | function(column){ | |
05 | column.title = "Date" | |
06 | column.formatter = Formatter.Date.calendar.gregorian | |
07 | } | |
08 | ) |
Properties of the Calendar class include: buddhist, chinese, coptic, ethiopicAmeteAlem, ethiopicAmeteMihret, gregorian, hebrew, indian, islamic, islamicCivil, islamicTabular, islamicUmmAlQura, iso8601, japanese, persian, republicOfChina, and identifier. [see the documentation of the Calendar class for more information]
Time Zone Abbreviations | ||
01 | TimeZone.abbreviations | |
02 | //-> ADT, AKDT, AKST, ART, AST, BDT, BRST, BRT, BST, CAT, CDT, CEST, CET, CLST, CLT, COT, CST, EAT, EDT, EEST, EET, EST, GMT, GST, HKT, HST, ICT, IRST, IST, JST, KST, MDT, MSD, MSK, MST, NZDT, NZST, PDT, PET, PHT, PKT, PST, SGT, UTC, WAT, WEST, WET, WIT |
Add a Date Column with Specified Time Zone | ||
01 | var newColumn = document.outline.addColumn( | |
02 | Column.Type.Date, | |
03 | document.editors[0].afterColumn(document.outline.outlineColumn), | |
04 | function(column){ | |
05 | column.title = "Date" | |
06 | column.formatter = Formatter.Date.calendar.gregorian | |
07 | column.formatter.timeZone = new TimeZone('PST') | |
08 | } | |
09 | ) |
Date Formatter Class Methods (functions)
Here are the methods (functions) of the Formater.Date class:
withStyle(dateStyle:Formatter.Date.Style, timeStyle:Formatter.Date.Style or nil) (--> Formatter.Date) • A formatter that will display dates according to the user’s “short” format selected in system settings.
withFormat(format:String) (--> Formatter.Date) • Returns a formatter with a specific ICU date format and the user’s current locale, calendar, and timeZone. See userguide.icu-project.org/formatparse/datetime/ for details on date format strings.
Add Date Column with Full Date | ||
01 | var newColumn = document.outline.addColumn( | |
02 | Column.Type.Date, | |
03 | document.editors[0].afterColumn(document.outline.outlineColumn), | |
04 | function(column){ | |
05 | column.title = "Date" | |
06 | column.formatter = Formatter.Date.withStyle(Formatter.Date.Style.Full) | |
07 | } | |
08 | ) |
Here are some of the possible combinations of date/time formatting. NOTE: including time is optional, and time and date formats are not required to be the same.
Date Formatter Style Options | ||
01 | Formatter.Date.withStyle(Formatter.Date.Style.Full) | |
02 | //-> Sunday, October 1, 2017 | |
03 | Formatter.Date.withStyle(Formatter.Date.Style.Full, Formatter.Date.Style.Full) | |
04 | //-> Sunday, October 1, 2017 at 5:21:07 PM Pacific Daylight Time | |
05 | Formatter.Date.withStyle(Formatter.Date.Style.Long) | |
06 | //-> October 1, 2017 | |
07 | Formatter.Date.withStyle(Formatter.Date.Style.Long, Formatter.Date.Style.Long) | |
08 | //-> October 1, 2017 at 5:26:51 PM PDT | |
09 | Formatter.Date.withStyle(Formatter.Date.Style.Medium) | |
10 | //-> Oct 1, 2017 | |
11 | Formatter.Date.withStyle(Formatter.Date.Style.Medium, Formatter.Date.Style.Medium) | |
12 | //-> Oct 1, 2017, 5:29:41 PM | |
13 | Formatter.Date.withStyle(Formatter.Date.Style.Short) | |
14 | //-> 10/1/17 | |
15 | Formatter.Date.withStyle(Formatter.Date.Style.Short, Formatter.Date.Style.Short) | |
16 | //-> 10/1/17, 5:24 PM |
Date Formatter Instance Methods (functions)
Here are the methods (functions) of an instance of the Formater.Date class:
stringFromDate(date:Date) → (String) • Returns a formatted date string for the passed-in date object, using the formatting of the formatter instance.
dateFromString(string:String) → (Date or nil) • Converts the passed-in date string into a date object. NOTE: the date string can be in any standard date format.
Date Formatter Instance Methods | ||
01 | fmatr = Formatter.Date.withStyle(Formatter.Date.Style.Long, Formatter.Date.Style.Short) | |
02 | dateObj = new Date() | |
03 | dateStr = fmatr.stringFromDate(dateObj) | |
04 | //-> October 21, 2017 at 12:14 PM | |
05 | fmatr.dateFromString(dateStr) |
Calendar
The calendar used by the formatter is indicated with one of the following properties:
buddhist (Calendar r/o) • The Buddhist calendar is a set of lunisolar calendars primarily used in mainland Southeast Asian countries of Cambodia, Laos, Myanmar and Thailand as well as in Sri Lanka and Chinese populations of Malaysia and Singapore for religious or official occasions. (Wikipedia)
chinese (Calendar r/o) • The traditional Chinese calendar is a lunisolar calendar which reckons years, months and days according to astronomical phenomena. It was developed by the Qin Dynasty. As of 2017, the Chinese calendar is defined by GB/T 33661-2017 Calculation and promulgation of the Chinese calendar, which the Standardization Administration of China issued on May 12, 2017. (Wikipedia)
coptic (Calendar r/o) • The Coptic calendar, also called the Alexandrian calendar, is a liturgical calendar used by the Coptic Orthodox Church and still used in Egypt. This calendar is based on the ancient Egyptian calendar. (Wikipedia)
ethiopicAmeteAlem (Calendar r/o) • The Ethiopic (Amete Alem) calendar is a solar calendar which in turn derives from the Egyptian Calendar, but like the Julian Calendar, it adds a leap day every four years without exception, and begins the year on August 29 or August 30 in the Julian Calendar. (Wikipedia)
ethiopicAmeteMihret (Calendar r/o) • The Ethiopic (Amete Mihret) calendar is a solar calendar which in turn derives from the Egyptian Calendar, but like the Julian Calendar, it adds a leap day every four years without exception, and begins the year on August 29 or August 30 in the Julian Calendar. (Wikipedia)
gregorian (Calendar r/o) • The Gregorian calendar is internationally the most widely used civil calendar.[1][2][Note 1] It is named after Pope Gregory XIII, who introduced it in October 1582. (Wikipedia)
hebrew (Calendar r/o) • The Hebrew or Jewish calendar is a lunisolar calendar used today predominantly for Jewish religious observances. (Wikipedia)
islamic (Calendar r/o) • The Islamic, Muslim, or Hijri calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days. It is used (often alongside the Gregorian calendar) to date events in many Muslim countries. It is also used by Muslims to determine the proper days of Islamic holidays and rituals, such as the annual period of fasting and the proper time for the pilgrimage to Mecca. (Wikipedia)
islamicCivil (Calendar r/o) • (see Islamic calendar).
islamicTabular (Calendar r/o) • The Tabular Islamic calendar (an example is the Fatimid or Misri calendar) is a rule-based variation of the Islamic calendar. It has the same numbering of years and months, but the months are determined by arithmetical rules rather than by observation or astronomical calculations. (Wikipedia)
islamicUmmAlQura (Calendar r/o) • Saudi Arabia uses the sighting method to determine the beginning of each month of the Hijri calendar. Since AH 1419 (1998/99) several official hilal sighting committees have been set up by the government to determine the first visual sighting of the lunar crescent at the beginning of each lunar month. (Wikipedia)
iso8601 (Calendar r/o) • Representation of dates and times is an international standard covering the exchange of date- and time-related data. It was issued by the International Organization for Standardization (ISO) and was first published in 1988. (Wikipedia)
japanese (Calendar r/o) • Japanese calendar types have included a range of official and unofficial systems. At present, Japan uses the Gregorian calendar together with year designations stating the year of the reign of the current Emperor. (Wikipedia)
persian (Calendar r/o) • The Iranian calendars are a succession of calendars invented or used for over two millennia in Iran (Persia). One of the longest chronological records in human history, the Iranian calendar has been modified time and again during its history to suit administrative, climatic, and religious purposes. (Wikipedia)
republicOfChina (Calendar r/o) • The Minguo calendar (Republic of China calendar) is the method of numbering years currently used in Taiwan by officials and other territories under the control of the Republic of China. It was used in mainland China from 1912 until the founding of the People’s Republic of China in 1949. (Wikipedia)
Decimal Formatter
The Decimal Formatter is used when a column is to display numeric data.
Decimal Formatter Class Properties
Here are the properties of the Formater.Decimal class:
currencyCodes (--> String r/o) • Returns the list of known ISO currency codes
custom (--> Formater.Decimal r/o) • Returns a new formatter that can be configured with custom settings.
decimal (--> Formater.Decimal r/o) • Returns a new number formatter that will use both a decimal separator.
percent (--> Formater.Decimal r/o) • Returns a new number formatter that will display the value as a percentage.
percentWithDecimal (--> Formater.Decimal r/o) • Returns a new number formatter that will display the value as a percentage with a decimal separator.
plain (--> Formater.Decimal r/o) • Returns a new number formatter that will not use any separators.
thousandsAndDecimal (--> Formater.Decimal r/o) • Returns a new number formatter that will use both a thousands and decimal separator.
Currency Codes | ||
01 | Formatter.Decimal.currencyCodes | |
02 | //-> ADP, AED, AFA, AFN, ALK, ALL, AMD, ANG, AOA, AOK, AON, AOR, ARA, ARL, ARM, ARP, ARS, ATS, AUD, AWG, AZM, AZN, BAD, BAM, BAN, BBD, BDT, BEC, BEF, BEL, BGL, BGM, BGN, BGO, BHD, BIF, BMD, BND, BOB, BOL, BOP, BOV, BRB, BRC, BRE, BRL, BRN, BRR, BRZ, BSD, BTN, BUK, BWP, BYB, BYR, BZD, CAD, CDF, CHE, CHF, CHW, CLE, CLF, CLP, CNX, CNY, COP, COU, CRC, CSD, CSK, CUC, CUP, CVE, CYP, CZK, DDM, DEM, DJF, DKK, DOP, DZD, ECS, ECV, EEK, EGP, EQE, ERN, ESA, ESB, ESP, ETB, EUR, FIM, FJD, FKP, FRF, GBP, GEK, GEL, GHC, GHS, GIP, GMD, GNF, GNS, GQE, GRD, GTQ, GWE, GWP, GYD, HKD, HNL, HRD, HRK, HTG, HUF, IDR, IEP, ILP, ILR, ILS, INR, IQD, IRR, ISJ, ISK, ITL, JMD, JOD, JPY, KES, KGS, KHR, KMF, KPW, KRH, KRO, KRW, KWD, KYD, KZT, LAK, LBP, LKR, LRD, LSL, LSM, LTL, LTT, LUC, LUF, LUL, LVL, LVR, LYD, MAD, MAF, MCF, MDC, MDL, MGA, MGF, MKD, MKN, MLF, MMK, MNT, MOP, MRO, MTL, MTP, MUR, MVP, MVR, MWK, MXN, MXP, MXV, MYR, MZE, MZM, MZN, NAD, NGN, NIC, NIO, NLG, NOK, NPR, NZD, OMR, PAB, PEI, PEN, PES, PGK, PHP, PKR, PLN, PLZ, PTE, PYG, QAR, RHD, ROL, RON, RSD, RUB, RUR, RWF, SAR, SBD, SCR, SDD, SDG, SDP, SEK, SGD, SHP, SIT, SKK, SLL, SOS, SRD, SRG, SSP, STD, SUR, SVC, SYP, SZL, THB, TJR, TJS, TMM, TMT, TND, TOP, TPE, TRL, TRY, TTD, TWD, TZS, UAH, UAK, UGS, UGX, USD, USN, USS, UYI, UYP, UYU, UZS, VEB, VEF, VND, VNN, VUV, WST, XAF, XAG, XAU, XBA, XBB, XBC, XBD, XCD, XDR, XEU, XFO, XFU, XOF, XPD, XPF, XPT, XRE, XSU, XTS, XUA, XXX, YDD, YER, YUD, YUM, YUN, YUR, ZAL, ZAR, ZMK, ZMW, ZRN, ZRZ, ZWL, ZWR, ZWD |
Creating a Decimal Formatter | ||
01 | // each will create a valid instance of a Decimal Formatter | |
02 | fmatr = Formatter.Decimal.custom | |
03 | fmatr = Formatter.Decimal.decimal | |
04 | fmatr = Formatter.Decimal.percent | |
05 | fmatr = Formatter.Decimal.percentWithDecimal | |
06 | fmatr = Formatter.Decimal.plain | |
07 | fmatr = Formatter.Decimal.thousandsAndDecimal |
Decimal Formatter Instance Properties
Here are the properties of an instance of the Formater.Decimal class:
decimalSeparator (String) • No documentation available.
negativeFormat (String) • A format string to use for negative values.
positiveFormat (String) • A format string to use for positive values.
thousandsSeparator (String) • No documentation available.
zeroSymbol (String) • The string to use when displaying a zero value. If this is null, the positiveFormat is used.
Decimal Formatter Class Methods (functions)
Here are the methods (functions) of the Formater.Decimal class:
currency(code:String or nil) (--> Formatter.Decimal) • Returns a new formatter that will display the value as a currency value. An ISO currency code may be specified to pick a specific currency, or null may be passed to use the default currency for the user’s locale. If the argument is not a valid currency code, an error will be thrown.
Number to Swedish Kroner | ||
01 | fmatr = Formatter.Decimal.currency('SEK') | |
02 | dVal = Decimal.fromString('12345') | |
03 | fmatr.stringFromDecimal(dVal) | |
04 | //-> SEK12,345.00 |
Decimal Formatter Instance Methods (functions)
Here are the methods (functions) of an instance of the Formater.Decimal class:
stringFromDecimal(number:Decimal) (--> String or nil) • Generates a corresponding string for the provided decimal value.
decimalFromString(string:String) (--> Decimal or nil) • Generates a corresponding decimal value for the provided string.
Add a Percent Column | ||
01 | var newColumn = document.outline.addColumn( | |
02 | Column.Type.Number, | |
03 | document.editors[0].afterColumn(document.outline.outlineColumn), | |
04 | function(column){ | |
05 | column.title = "Percent" | |
06 | column.formatter = Formatter.Decimal.percent | |
07 | } | |
08 | ) |
Duration Formatter
The Duration Formatter is used when a column is to display time-based data.
Duration Formatter Constructor (function)
Here is the constructor (function) of the Formater.Duration class:
new Formatter.Duration() (--> Formatter.Duration) • Creates a new instance of the Formatter.Duration class.
Duration Formatter Instance Properties
Here are the properties of an instance of the Formatter.Duration class:
hoursPerDay (--> Number) • The number of hours considered to comprise a “work day” (In the U.S. the default is 8).
hoursPerWeek (--> Number) • The number of hours considered to comprise a “work week” (In the U.S. the default is 40).
useVerboseFormat (--> Boolean) • f true, the formatter spells out the time durations; for example, 1d 4h gets expanded to 1 day 4 hours.
Duration Formatter Instance Methods (functions)
Here are the methods (functions) of an instance of the Formater.Duration class:
stringFromDecimal(number:Decimal) (--> String or nil) • Generates a corresponding string for the provided decimal value.
decimalFromString(string:String) (--> Decimal or nil) • Generates a corresponding decimal value for the provided string.
Add a Duration Column | ||
01 | var newColumn = document.outline.addColumn( | |
02 | Column.Type.Duration, | |
03 | document.editors[0].afterColumn(document.outline.outlineColumn), | |
04 | function(column){ | |
05 | column.title = "HPD" | |
06 | newFormatter = new Formatter.Duration() | |
07 | column.formatter = newFormatter | |
08 | } | |
09 | ) |
Example Plug-In
Here’s an example plug-in that appends a numeric column after the last column on the right side of the document. The action displays a text input form to prompt the user to title the column.
Append Numeric Column | ||
01 | /*{ | |
02 | "type": "action", | |
03 | "targets": ["omnioutliner"], | |
04 | "author": "Otto Automator", | |
05 | "identifier": "com.omni-automation.oo.add-numeric-column", | |
06 | "version": "1.0", | |
07 | "description": "Append a new numeric column to the end of the outline.", | |
08 | "label": "Append Numeric Column", | |
09 | "shortLabel": "Append Numeric Column" | |
10 | }*/ | |
11 | (() => { | |
12 | var action = new PlugIn.Action(function(selection, sender){ | |
13 | ||
14 | // CONSTRUCT THE FORM | |
15 | var inputForm = new Form() | |
16 | ||
17 | // CREATE FORM ELEMENTS: TEXT INPUT | |
18 | textInputField = new Form.Field.String( | |
19 | "columnTitle", | |
20 | "Title", | |
21 | null | |
22 | ) | |
23 | ||
24 | // ADD THE ELEMENTS TO THE FORM | |
25 | inputForm.addField(textInputField) | |
26 | ||
27 | // DISPLAY THE FORM DIALOG | |
28 | var formPromise = inputForm.show("Enter the column title:", "Add") | |
29 | ||
30 | // VALIDATE FORM CONTENT | |
31 | inputForm.validate = function(formObject){ | |
32 | // EXTRACT VALUES FROM THE FORM’S VALUES OBJECT | |
33 | columnTitle = formObject.values['columnTitle'] | |
34 | // HAS TEXT BEEN ENTERED IN THE INPUT FIELD? | |
35 | textStatus = (columnTitle && columnTitle.length > 0) ? true:false | |
36 | // RETURN VALIDATION | |
37 | return textStatus | |
38 | } | |
39 | ||
40 | // PROCESS FORM RESULTS | |
41 | formPromise.then(function(formObject){ | |
42 | // EXTRACT VALUES FROM THE FORM’S VALUES OBJECT | |
43 | var columnTitle = formObject.values['columnTitle'] | |
44 | ||
45 | // CREATE AND FORMAT THE COLUMN | |
46 | tree = document.outline | |
47 | editor = document.editors[0] | |
48 | tree.addColumn( | |
49 | Column.Type.Number, | |
50 | editor.afterColumn(columns[columns.length]), | |
51 | function(column){ | |
52 | column.title = columnTitle | |
53 | editor.setSummaryForColumn(column, Column.Summary.Total) | |
54 | editor.setWidthForColumn(column, 64) | |
55 | column.style.set(Style.Attribute.ParagraphAlignment, TextAlignment.Right) | |
56 | column.formatter = Formatter.Decimal.plain | |
57 | } | |
58 | ) | |
59 | ||
60 | }) | |
61 | ||
62 | // PROCESS FORM CANCELLATION | |
63 | formPromise.catch(function(err){ | |
64 | console.log("form cancelled", err.message) | |
65 | }) | |
66 | ||
67 | }); | |
68 | ||
69 | action.validate = function(selection, sender){ | |
70 | // validation code | |
71 | // selection options: columns, document, editor, items, nodes, outline, styles | |
72 | return true | |
73 | }; | |
74 | ||
75 | return action; | |
76 | })(); |
This webpage is in the process of being developed. Any content may change and may not be accurate or complete at this time.