2022.2

Stylingisdoneviastyle sheets(see"Localformattingversusstylesheets"onpage671).Thestyle
rulesareinthecontext_print_styles.cssfile.NotehowtheycombinetheHTMLtag,IDandclassofele-
mentstoselectthem.(Seealso:"SelectorsinOLConnect"onpage825.)
Scripts
Scriptspersonalizecontent.MostofthesciptsintheInformationfolder(ontheScriptspane)aremade
withtheText Script Wizard(see"UsingtheTextScriptWizard"onpage729).
Tip: HoveroverthenameofascriptintheScriptspanetohighlightpartsofthetemplatethatare
affectedbythescript.
Textthatshouldbereplacedbydataisnotonlysurroundedby@(e.g.@date@)butalsowrappedina
span(see"Span"onpage625).EachspanhasanID,oraclassifthesametextoccursmorethan
once,tousethatastheselectorofthescript.TheselectoroftheInvoiceTotalscript,forinstance,isa
class:.inv-total.
Wrappingelementsinabox(see"Boxes"onpage623)orinasemanticHTMLelementmakesiteasier
totargettheminascriptorinastylesheet.Placethecursorintheelementorselectmultipleelements.
Then,onthemenu,clickInsert > Wrap in Box.Youcannowusethewrapperelementasascript'sor
style'sselector;see"UsingtheTextScriptWizard"onpage729and"Stylingandformatting"on
page671.
TheTextScriptWizardhasanExpandbuttonthatopenstheScript Editor,whereyoucaneditthe
codeoraddyourown.(Foranintroduction,see"Writingyourownscripts"onpage808).
Whenyoudouble-clickontheInvoice Metascript,theScriptEditoropensimmediately.Thisscript
showshowtoadddatausingthereplace()method(seehttps://www.w3schools.com/jsref/jsref_
replace.asp).
NotethatthisisanativeJavaScriptfunction.FunctionsthatareonlyavailableinDesignerscriptsare
listedinthe"DesignerScriptAPI"onpage1168.
Dynamic Table
ThetableintheinvoiceisaDynamicTable.Itisfilledandexpandeddynamicallybythescriptsinthe
Productsfolder.Tolearnhowtoinsertandeditsuchatable,see"DynamicTable"onpage742.
Notethatthistabledoesnotuseoneofthedefaulttablestyles,andthatthestylesheetwiththedefault
tablestylesisnotpresentinthetemplate.Toaddthatstylesheettothetemplate,insertatableusing
theDynamicTablewizard.
The data mapping configuration
ThetemplateismergedwithdatafromanXMLfile:SampleData.xml.TheyareextractedfromtheXML
filewithadatamappingconfiguration,madewiththeDataMapper(see"TheDataMapper"on
Page 155