2022.2

6. Enterthefollowingscriptcode:Thenameofthedatafield(inthiscase:photo)mustbethatofthe
Cameradatainyourdatamodel.
Thisscriptupdatestheattribute“src”withthefieldcontainingthebase64image.
7. ClickOKtosavethescriptandtoggletothePreviewmodetoseetheresult.Youshouldsee
yourimage.Whenyouresizetheinlineboxthatsurroundstheimage,theimageshouldberes-
izedaswell.
Iftheinlineboxisn'tvisible,clicktheShowEdges buttoninthetoolbar.
Designing a COTG Template
DesigningaCaptureOnTheGotemplateismorethanaddingelementstoaWebform.Thistopic
sharessomeinsightsregardingthedesignprocessandprinciples.
Designprocess
Ideally,thedesignprocessconsistsofthefollowingsteps.
1. Gathering information.Itisoftentemptingtoskipthisstep,especiallywhenaCapture
OnTheGoformreplacesapaperform,buttheresearchthatyoudotofindoutwhatthecompany
actuallyneedswillprovetobewellworthyourtime.Creatingspecificationsupfrontpreventsdis-
cussions,reducesreworkandthereforesavestime.
2. Listing the input fieldsthatareneeded,theirtype,andpossibleinputconstraints.Thinkofhow
theinformationshouldbevisuallygrouped.Togetanoverviewofalltheelementsandfeatures
thatcanbeusedinaCaptureOnTheGoform,checkoutthefollowingpages:
l
"COTGElements"onpage633,aboutelementsthatwerespeciallydesignedforCOTG.
l
"FormElements"onpage644,aboutelementsthatcanbeusedonCOTGformsandon
anyotherWebform.
l
"UsingFoundation"onpage528,aboutelementsandfeaturesthatcomewiththeFound-
ationframeworkthatisaddedautomaticallybyCOTGtemplatewizards.
l
AftercreatingaCaptureOnTheGotemplateusingawizard,youcanfindmoreready-made
elementsintheSnippetsfolderontheResourcespane.
3. Creating mockups.Amockuporwireframewillhelpyoutolayouttheformandallowsyourcus-
tomertoprovidefeedbackearlyintheproject.Thiswillsaveyoualotoftime:typicallyitiseasier
tochangethesketchthantoreworkthecode.Inaddition,mockupsprovideawaytodousability
testingbeforeactuallycreatingtheform.
Notethatmobiledevicescomeinvarioussizes.Itisimportanttoadapttheformdesigntothese
screensizes.Therearevariousfreeandcommercialmockupapplications(bothonlineandoff-
line),butasketchonpaperwilldotoo.Checkoutthefreemockuptemplatesfrom
Page 522