2022.2

Addinganeventhandler
Firstofallyouneedtowriteaneventhandlerthatrespondstotheeventthatismeanttotriggerthecre-
ationofthewidget(e.g.theonClickeventofabuttonorlink),bycallingthefunctionthatcreatesthewid-
get.Theeventhandlerhastobeaddedonthe$(document).ready()function,whichisfiredwhenthe
Formisloadedinthebrowser/app.
$(document).ready(function() {
$('#add-element').on('click', function() {
//call the function that creates the widget
});
});
Creatingthewidget
Nowyoucanstartwritingthecodethatconstructs,addsandinitializesthewidget.Thiscodehastobe
basedonjQuery.
Constructing the HTML
AwidgetbasicallyisanHTMLelementwithcertainattributesandcontents.TheHTMLstructureofa
widgetcanbeseenontheSourcetabafteraddingthewidgettoaFormintheDesigner.Incode,recon-
structtheHTML.MakesuretogivethenewelementanID.
ThiscodeconstructstheHTMLofaDateelement:
<label>date1
<input id="date1" role="cotg.DatePicker" readonly="" name="date1" type="text">
</label>
Adding it to the Form
AddtheHTMLtoanelementontheFormusingtheappend()function.
ThefollowingcodeappendsthecontentsofthevariablehtmltoanelementontheFormthathastheID
cameras:
$('#cameras').append(html);.
Initializing the widget
Awidgethastobeinitializedtoallowittobeactuallyused.WidgetsthatarealreadypresentinaForm
atstartupareinitializedassoonastheFormisloadedintheapp.Awidgetthathasbeenaddedtoa
FormdynamicallyhastobeinitializeddirectlyafteraddingittotheForm;otherwisethenewwidget
won'trespondtoactionsoftheuser,eventhoughitisvisibleintheapp.
Initializingawidgettakesjustonelineofcode,inwhichyouselectthenewwidgetbyitsIDandcallthe
initializationfunctiononit.Thiscode,forexample,initializesanewCameraelementthathastheID
myCamera:
Page 549