2022.2

Table Of Contents

(see"Variabledatainthetext"onpage708).Theywillshowupinthetemplateas they are.SVG

datawillbeinterpretedanddisplayedasanimage.Stringsandbase64-encodedstringsshowup

asstrings.Inorderforabase64-encodedstringtobeinterpretedasanimage,itmustbeadded

totheURLofanimage.

AddingCameradatatothetemplate

TheCamerawidgetsubmitsabase64-encodedstring,whichcanbeputinadatafieldusingthe

DataMapper.Whenthisdatafieldisdraggedintoatemplate,thestringwillshowupinthecontent,

insteadoftheimage.

Tomaketheimageappearinatemplate,thedatahastobeusedastheURLofanimage.

ThebelowproceduredescribeshowtouseCameradataasthesourceofanimageinsidea<div>con-

tainer.Thebenefitofthisapproachisthattheimageautomaticallyscalestothesizeofthecontainer.

1. ClicktheInsert Inline Boxicononthetoolbar.TheInsert Inline Boxdialogappears.

2. EnteranIDforthebox(anythingwilldo,aslongasithelpsyouidentifythebox)andclickOK.

Theboxisaddedtothetextflowandcanberesizedifneeded.

<p>

Div content goes here

</p>

3. SwitchtotheSourcetabandreplacethecontentofthebox:bythistext:

4. SwitchbacktotheDesigntab.Youwillseeasmall,emptyrectangleinsideatthetopoftheinline

box.

5. Right-clicktheemptyrectangleandchooseNew Script...inthecontextualmenu.TheEdit

Scriptdialogappears.TheselectorofthescriptisautomaticallysettotheIDoftheselectedele-

ment(#camera).

Alternatively,youcouldaddanewscriptontheScriptspaneandmakesurethattheSelector

fieldissetto#camera.

results.attr("src", record.fields.photo);

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.

Page 556