Produced by Araxis Merge on 9/27/2017 9:44:47 AM Central Daylight Time. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.
| # | Location | File | Last Modified |
|---|---|---|---|
| 1 | adk\adk\product\production\documentation\adk | developing-adk.md | Wed Jun 7 14:02:30 2017 UTC |
| 2 | adk\adk\product\production\documentation\adk | developing-adk.md | Tue Sep 26 13:01:56 2017 UTC |
| Description | Between Files 1 and 2 |
|
|---|---|---|
| Text Blocks | Lines | |
| Unchanged | 4 | 810 |
| Changed | 3 | 6 |
| Inserted | 0 | 0 |
| Removed | 0 | 0 |
| Whitespace | |
|---|---|
| Character case | Differences in character case are significant |
| Line endings | Differences in line endings (CR and LF characters) are ignored |
| CR/LF characters | Not shown in the comparison detail |
No regular expressions were active.
| 1 | ::: page-d escription | |
| 2 | # Developi ng in the ADK # | |
| 3 | The follow ing guide is provide d as a ref erence for ADK devel opers | |
| 4 | ::: | |
| 5 | ||
| 6 | ## ADK.UI. Form ## | |
| 7 | ::: callou t | |
| 8 | Form contr ols need t o be desig ned with f lexibility and usabi lity for o ptimal con sumption b y form dev elopers in mind. Thi s means th at config options sh ould be co nsistent a cross cont rols while balancing the level of config urability to pass th rough to t he form de velopers. It is also important to ensure that the controls a re as effi cient and memory-lea k-free as possible; familiarit y with Bac kbone and Marionette is essent ial to ach ieve this. Additiona lly, each control ne eds to be thoroughly tested to ensure la sting func tionality. Finally, no control can be co nsidered c omplete un til it has been vett ed for 508 complianc e / usabil ity for bo th sighted and unsig hted users . | |
| 9 | ::: | |
| 10 | ||
| 11 | ### Develo ping Contr ols ### | |
| 12 | ||
| 13 | To create a new cont rol: | |
| 14 | - **Create ** a new c ontrol fil e under `p roduct/pro duction/ma in/ui_comp onents/for m/controls /` | |
| 15 | - The filena me should be camel-c ase with t he name eq uating to the name o f the cont rol (ie. ' newExample .js') | |
| 16 | - **Regist er** the n ew control in `produ ct/product ion/main/u i_componen ts/form/co mponent.js `. This is done by s imply incl uding the path to yo ur control in the `d efine` fun ction's ar ray so tha t when the component .js is req uired, all of the fo rm control s are also required. | |
| 17 | :: : callout | |
| 18 | :: : showcode Changes r equired in component .js: | |
| 19 | `` `JavaScrip t | |
| 20 | // component .js | |
| 21 | de fine([ | |
| 22 | // . .. other p aths | |
| 23 | 'mai n/ui_compo nents/form /controls/ newExample ' // only 1 line to add | |
| 24 | ], function( ) { | |
| 25 | // . .. compone nt.js | |
| 26 | }) ; | |
| 27 | `` ` | |
| 28 | :: : | |
| 29 | - **Write* * the cont rol functi onality (i n our exam ple, newEx ample.js) | |
| 30 | 1) Ensure th at the fil e is set i n in our s tandard re quire modu le setup w ith the ap propriate requiremen ts spelled out. At a minimum, you need B ackbone, M arionette, Handlebar s (our pre ferred tem plate engi ne), Under score (for helpful f unctions), and Puppe tForm (our form libr ary): | |
| 31 | :: : callout | |
| 32 | :: : showcode Setting u p newExamp le.js: | |
| 33 | `` ` JavaScri pt | |
| 34 | // newExampl e.js | |
| 35 | de fine([ | |
| 36 | 'bac kbone', | |
| 37 | 'mar ionette', | |
| 38 | 'han dlebars', | |
| 39 | 'und erscore' | |
| 40 | ], function( Backbone, Marionette , Handleba rs, _) { | |
| 41 | var NewExample Control; / / we haven 't set up our views yet | |
| 42 | // a require m odule need s to retur n the item you want. .. | |
| 43 | // i n this cas e, it will be our co ntrol, whi ch is empt y for now | |
| 44 | retu rn NewExam pleControl ; | |
| 45 | }) ; | |
| 46 | `` ` | |
| 47 | :: : | |
| 48 | ||
| 49 | 2) Next, we create our views tha t will mak e up our c ontrol. Fo r this exa mple, we w ill be cre ating a co ntrol that simply di splays a s elect as w ell as pre view text of the cur rently sel ected opti on. At thi s time, we should al so attach our contro l to the P uppetForm object. Do ing this r egisters o ur control within Pu ppetForm a nd starts the path t o making o ur control consumabl e in a for m. The for mat should be `Puppe tForm.NewE xampleCont rol`. | |
| 50 | - ** NOTE**: yo u can also directly extend exi sting form controls. For an ex ample of t his, pleas e see the input cont rol in ui_ components /form/cont rols/input .js | |
| 51 | :: : callout | |
| 52 | :: : showcode Attaching control t o PuppetFo rm and det erming top -level vie w in newEx ample.js: | |
| 53 | `` ` Javascri pt | |
| 54 | va r NewExamp leControl = PuppetFo rm.NewExam pleControl = Marione tte.Layout View.exten d(); | |
| 55 | // still emp ty but now our views are almos t ready to go | |
| 56 | re turn NewEx ampleContr ol; | |
| 57 | `` ` | |
| 58 | :: : | |
| 59 | ||
| 60 | 3) Now that our basic structure of our con trol is se t up, we n ow want to extend th e default control im plementati on. Doing this will greatly re duce the a mount of c ode requir ed. At thi s time we will creat e another object var iable whic h will con tain the v iew's attr ibutes. | |
| 61 | :: : callout | |
| 62 | :: : showcode Extending control t o use Pupp etForm.Com monPrototy pe in newE xample.js: | |
| 63 | `` ` JavaScri pt | |
| 64 | va r NewExamp le = {}; | |
| 65 | va r NewExamp leControl = PuppetFo rm.NewExam pleControl = Marione tte.Layout View.exten d( | |
| 66 | _.de faults(New Example, _ .defaults( PuppetForm .CommonPro totype, Pu ppetForm.C ommonEvent sFunctions )) | |
| 67 | ); | |
| 68 | re turn NewEx ampleContr ol; | |
| 69 | `` ` | |
| 70 | :: : | |
| 71 | ||
| 72 | 4) We are re ady to set up our vi ew. For st arters, we need to c reate a te mplate. Si nce our co ntrol is a Marionett e.LayoutVi ew, we wan t to defin e regions in our tem plate. Sin ce we're c reating a control wi th two par ts, we can start wit h two regi ons. | |
| 73 | :: : callout | |
| 74 | :: : showcode Setting u p top leve l view in newExample .js: | |
| 75 | `` ` JavaScri pt | |
| 76 | va r NewExamp le = { // rememeber, this is a layout vi ew | |
| 77 | te mplate: Ha ndlebars.c ompile([ | |
| 78 | // col-xs-6 put on in order to h ave the tw o side by side | |
| 79 | '<div cl ass="new-e xample-dro pdown-regi on col-xs- 6"></div>' , | |
| 80 | '<div cl ass="new-e xample-tex t-region c ol-xs-6">< /div>' | |
| 81 | ]. join('\n') ), | |
| 82 | ui : { | |
| 83 | 'Dropdow nRegionDiv ': '.new-e xample-dro pdown-regi on', | |
| 84 | 'TextReg ionDiv': ' .new-examp le-text-re gion' | |
| 85 | }, | |
| 86 | re gions: { | |
| 87 | // when poss ible, use the ui has h for impr oved maint ainability and perfo rmance | |
| 88 | 'Dropdow nRegion': '@ui.Dropd ownRegionD iv', | |
| 89 | 'TextReg ion': '@ui .TextRegio nDiv' | |
| 90 | } | |
| 91 | }; | |
| 92 | var Ne wExampleCo ntrol = Pu ppetForm.N ewExampleC ontrol = M arionette. LayoutView .extend( | |
| 93 | _. defaults(N ewExample, _.default s(PuppetFo rm.CommonP rototype, PuppetForm .CommonEve ntsFunctio ns)) | |
| 94 | ); | |
| 95 | return NewExampl eControl; | |
| 96 | `` ` | |
| 97 | :: : | |
| 98 | ||
| 99 | 5) Next, we want utili ze PuppetF orm.Common Prototype and do all the initi alize magi c that let s the cont rol work. Depending on what yo u're doing with your control, you may ne ed additio nal functi ons in ord er for you r control to work pr operly. | |
| 100 | :: : callout | |
| 101 | :: : showcode Calling C ommonProto ype functi ons enabli ng correct functiona lity in ne wExample.j s: | |
| 102 | `` ` JavaScri pt | |
| 103 | va r NewExamp le = { // rememeber, this is a layout vi ew | |
| 104 | // ... templ ate, regio ns, and ui hidden fo r brevity | |
| 105 | in itialize: function(o ptions) { | |
| 106 | // s ee PuppetF orm.Common Prototype in _assets /libs/cust om/puppetF orm.js | |
| 107 | // i n order to view what these fun ctions are doing | |
| 108 | this.ini tOptions(o ptions); | |
| 109 | this.set Formatter( ); | |
| 110 | this.lis tenToField Options(); | |
| 111 | // end C ommonProto type funct ions | |
| 112 | } | |
| 113 | }; | |
| 114 | var Ne wExampleCo ntrol = Pu ppetForm.N ewExampleC ontrol = M arionette. LayoutView .extend( | |
| 115 | _. defaults(N ewExample, _.default s(PuppetFo rm.CommonP rototype, PuppetForm .CommonEve ntsFunctio ns)) | |
| 116 | ); | |
| 117 | return NewExampl eControl; | |
| 118 | `` ` | |
| 119 | :: : | |
| 120 | ||
| 121 | 6) Now that our layout view is a ll set up, we then n eed to put views in the region s. We'll s tart with the dropdo wn view fi rst. We wi ll be usin g the drop down contr ol that is already c reated. We want to c reate a ne w `PuppetF orm.Select Control` w ith the op tions requ ired for m inimal fun ctionality . The requ ired optio ns can be found in t he [Select Control's Documenta tion](form -controls. md#Select) . | |
| 122 | - ** NOTE:** At this poin t, you wou ld probabl y want to view this working on the demo page. Foll ow the [De moing Cont rols Instr uctions](d eveloping- adk.md#Dem oing-Contr ols) to ge t started. | |
| 123 | :: : callout | |
| 124 | :: : showcode Adding in stance of select con trol in ne wExample.j s: | |
| 125 | `` ` JavaScri pt | |
| 126 | va r NewExamp le = { // rememeber, this is a layout vi ew | |
| 127 | // ... templ ate and ui hidden fo r brevity | |
| 128 | re gions: { | |
| 129 | 'Dropdow nRegion': '@ui.Dropd ownRegionD iv', | |
| 130 | 'TextReg ion': '@ui .TextRegio nDiv' | |
| 131 | }, | |
| 132 | in itialize: function(o ptions) { | |
| 133 | // . .. CommonP rototype f unctions h ere, hidde n for brev ity | |
| 134 | var comm entInputVi ewField = new Puppet Form.Field ({ | |
| 135 | cont rol: "sele ct", | |
| 136 | name : this.fie ld.get('na me'), | |
| 137 | labe l: this.fi eld.get('l abel'), | |
| 138 | pick List: this .field.get ('pickList ') | |
| 139 | }); | |
| 140 | this.dro pdownView = new Pupp etForm.Sel ectControl ({ | |
| 141 | fiel d: comment InputViewF ield, | |
| 142 | mode l: this.mo del // ref ers (most often) to the form's model | |
| 143 | }); | |
| 144 | }, | |
| 145 | on Show: func tion() { | |
| 146 | // onBeforeS how would be preferr ed, but AD K.UI.Form is current ly a compo site view | |
| 147 | // and doesn 't fire on BeforeShow | |
| 148 | this .showChild View('Drop downRegion ', this.dr opdownView ); | |
| 149 | } | |
| 150 | }; | |
| 151 | var Ne wExampleCo ntrol = Pu ppetForm.N ewExampleC ontrol = M arionette. LayoutView .extend( | |
| 152 | _. defaults(N ewExample, _.default s(PuppetFo rm.CommonP rototype, PuppetForm .CommonEve ntsFunctio ns)) | |
| 153 | ); | |
| 154 | return NewExampl eControl; | |
| 155 | `` ` | |
| 156 | :: : | |
| 157 | ||
| 158 | 7) After our select co ntrol is a ll set up, we can ad d our prev iew text v iew. Inste ad of inse rting anot her contro l, we will be provid ing our ow n view. Th e importan t things t o pass in are the co ntrol's mo del and fi eld. These are used to map the preview t ext view's template to the cor rect value from the select. | |
| 159 | :: : callout | |
| 160 | :: : showcode Adding pr eview text view to n ewExample. js | |
| 161 | `` ` JavaScri pt | |
| 162 | va r PreviewT extView = Marionette .ItemView. extend({ | |
| 163 | te mplate: Ha ndlebars.c ompile([ | |
| 164 | // notice th e if used to avoid a n empty <p > tag | |
| 165 | '{{#if v alue}}' + | |
| 166 | '<p clas s="new-exa mple-previ ew-text">{ {value}} s elected!</ p>' + | |
| 167 | '{{/if}} ' | |
| 168 | ]. join('\n') ), | |
| 169 | mo delEvents: function( ) { | |
| 170 | // we need t o tell the view to r erender an y time the select's value chan ges | |
| 171 | var modelEvent sObject = {}; | |
| 172 | mode lEventsObj ect['chang e:' + this .field.get ('name')] = 'render' ; | |
| 173 | retu rn modelEv entsObject ; | |
| 174 | }, | |
| 175 | in itialize: function(o ptions) { | |
| 176 | // need to a ssign the options pa ssed in to this view | |
| 177 | this .field = o ptions.fie ld; | |
| 178 | }, | |
| 179 | se rializeMod el: functi on(model) { | |
| 180 | // this is w hy we need ed model a nd field | |
| 181 | var data = { | |
| 182 | value: model.get (this.fiel d.get('nam e')) | |
| 183 | }; | |
| 184 | retu rn data; | |
| 185 | } | |
| 186 | }); | |
| 187 | var Ne wExample = { // reme meber, thi s is a lay out view | |
| 188 | // ... templ ate and ui hidden fo r brevity | |
| 189 | re gions: { | |
| 190 | 'Dropdow nRegion': '@ui.Dropd ownRegionD iv', | |
| 191 | 'TextReg ion': '@ui .TextRegio nDiv' | |
| 192 | }, | |
| 193 | in itialize: function(o ptions) { | |
| 194 | // ... C ommonProto type funct ions and d ropdownVie w's init h idden for brevity | |
| 195 | this.pre viewTextVi ew = new P reviewText View({ | |
| 196 | mode l: this.mo del, // ge nerally wi ll be the form's mod el | |
| 197 | fiel d: this.fi eld // ava ilable aft er this.in itOptions is called | |
| 198 | }); | |
| 199 | }, | |
| 200 | on Show: func tion() { | |
| 201 | this.sho wChildView ('Dropdown Region', t his.dropdo wnView); | |
| 202 | this.sho wChildView ('TextRegi on', this. previewTex tView); | |
| 203 | } | |
| 204 | }; | |
| 205 | var Ne wExampleCo ntrol = Pu ppetForm.N ewExampleC ontrol = M arionette. LayoutView .extend( | |
| 206 | _. defaults(N ewExample, _.default s(PuppetFo rm.CommonP rototype, PuppetForm .CommonEve ntsFunctio ns)) | |
| 207 | ); | |
| 208 | return NewExampl eControl; | |
| 209 | `` ` | |
| 210 | :: : | |
| 211 | ||
| 212 | - **Finish ed!** Here 's newExam ple contro l we have so far. It should be working a nd look so mewhat lik e this: | |
| 213 |  | |
| 214 | :: : callout | |
| 215 | :: : showcode Finished newExample .js: | |
| 216 | `` `JavaScrip t | |
| 217 | // newExampl e.js | |
| 218 | de fine([ | |
| 219 | 'backbon e', | |
| 220 | 'marione tte', | |
| 221 | 'handleb ars', | |
| 222 | 'undersc ore', | |
| 223 | 'puppetF orm' | |
| 224 | ], function( Backbone, Marionette , Handleba rs, _, Pup petForm) { | |
| 225 | var Prev iewTextVie w = Marion ette.ItemV iew.extend ({ | |
| 226 | temp late: Hand lebars.com pile([ | |
| 227 | '{{#if val ue}}' + | |
| 228 | '<p class= "new-examp le-preview -text">{{v alue}} sel ected!</p> ' + | |
| 229 | '{{/if}}' | |
| 230 | ].jo in('\n')), | |
| 231 | mode lEvents: f unction() { | |
| 232 | var mo delEventsO bject = {} ; | |
| 233 | modelE ventsObjec t['change: ' + this.f ield.get(' name')] = 'render'; | |
| 234 | return modelEven tsObject; | |
| 235 | }, | |
| 236 | init ialize: fu nction(opt ions) { | |
| 237 | this.f ield = opt ions.field ; | |
| 238 | }, | |
| 239 | seri alizeModel : function (model) { | |
| 240 | var da ta = { | |
| 241 | value: m odel.get(t his.field. get('name' )) | |
| 242 | }; | |
| 243 | return data; | |
| 244 | } | |
| 245 | }); | |
| 246 | var NewE xample = { // rememe ber, this is a layou t view | |
| 247 | temp late: Hand lebars.com pile([ | |
| 248 | '<div clas s="new-exa mple-dropd own-region col-xs-6" ></div>', | |
| 249 | '<div clas s="new-exa mple-text- region col -xs-6"></d iv>' | |
| 250 | ].jo in('\n')), | |
| 251 | ui: { | |
| 252 | 'DropdownR egionDiv': '.new-exa mple-dropd own-region ', | |
| 253 | 'TextRegio nDiv': '.n ew-example -text-regi on' | |
| 254 | }, | |
| 255 | regi ons: { | |
| 256 | 'DropdownR egion': '@ ui.Dropdow nRegionDiv ', | |
| 257 | 'TextRegio n': '@ui.T extRegionD iv' | |
| 258 | }, | |
| 259 | init ialize: fu nction(opt ions) { | |
| 260 | // see Pup petForm.Co mmonProtot ype in _as sets/libs/ custom/pup petForm.js | |
| 261 | // in orde r to view what these functions are doing | |
| 262 | this.initO ptions(opt ions); | |
| 263 | this.setFo rmatter(); | |
| 264 | this.liste nToFieldOp tions(); | |
| 265 | // end Com monPrototy pe functio ns | |
| 266 | var commen tInputView Field = ne w PuppetFo rm.Field({ | |
| 267 | contro l: "select ", | |
| 268 | name: this.field .get('name '), | |
| 269 | label: this.fiel d.get('lab el'), | |
| 270 | pickLi st: this.f ield.get(' pickList') | |
| 271 | }); | |
| 272 | this.dropd ownView = new Puppet Form.Selec tControl({ | |
| 273 | field: commentIn putViewFie ld, | |
| 274 | model: this.mode l | |
| 275 | }); | |
| 276 | this.previ ewTextView = new Pre viewTextVi ew({ | |
| 277 | model: this.mode l, | |
| 278 | field: this.fiel d | |
| 279 | }); | |
| 280 | }, | |
| 281 | onSh ow: functi on() { | |
| 282 | this.showC hildView(' DropdownRe gion', thi s.dropdown View); | |
| 283 | this.showC hildView(' TextRegion ', this.pr eviewTextV iew); | |
| 284 | } | |
| 285 | }; | |
| 286 | var NewE xampleCont rol = Pupp etForm.New ExampleCon trol = Mar ionette.La youtView.e xtend( | |
| 287 | _.de faults(New Example, _ .defaults( PuppetForm .CommonPro totype, Pu ppetForm.C ommonEvent sFunctions )) | |
| 288 | ); | |
| 289 | return N ewExampleC ontrol; | |
| 290 | }) ; | |
| 291 | `` ` | |
| 292 | :: : | |
| 293 | ||
| 294 | ::: defini tion | |
| 295 | Your new c ontrol is now create d and regi stered, bu t nothing is using i t yet. If you haven' t already, see the [ Demoing Co ntrols](#D emoing-Con trols) sec tion to se t it up fo r the demo page. Thi s was a ve ry simple example, f eel free t o look at other [ADK .UI.Form c ontrols](f orm-contro ls.md) to get an ide a of what can be pro vided in t his framew ork. | |
| 296 | ::: | |
| 297 | ||
| 298 | ### Demoin g Controls ### | |
| 299 | The demo p age is ava ilable at: [locally deployed a pp url]/#u i-componen ts-demo <b r />(ie. h ttps:// IP /#ui-compo nents-demo ) | |
| 300 | ||
| 301 | In order f or your co ntrol to b e displaye d on the d emo page, the follow ing steps must be fo llowed: | |
| 302 | - **Contro l exists:* * The cont rol must b e set up a s specifie d in the [ Developing Controls] (#Developi ng-Control s) section . | |
| 303 | - **Regist er** the c ontrol in the demo p age's form control m anifest: ` product/pr oduction/d emo_files/ feature_fo rms/formCo ntrols.js` | |
| 304 | - Add an obj ect to the array of controls w ith: | |
| 305 | - ** id**: (str ing) name of control | |
| 306 | - ** label**: ( string) pr etty versi on of name to be dis played on demo page | |
| 307 | - ** developmen tStatus**: (boolean) whether o r not it i s function al barring styling/5 08 approva l | |
| 308 | - ** cometStatu s**: (bool ean) has b een vetted for appro ved styles and 508 c ompliance | |
| 309 | - ** exampleFor m**: (bool ean) must be true to see a dem o of the c ontrol | |
| 310 | - ** supportsEr rorMessage **: (boole an) determ ines if er rorMessage functiona lity is pu t into con trol's exa mple form | |
| 311 | - ** storyNumbe r**: (inte ger) maps to Rally s tory numbe r (leave t he 'US' OF F of this number) | |
| 312 | - ** documentat ionURL**: (string) l ink to con trol's ADK documenta tion. Ensu re the lin k works be fore forge tting abou t it. (exa mple: `"/d ocumentati on/#/adk/f orm-contro ls#Control -Name"`) | |
| 313 | :: : callout | |
| 314 | :: : showcode Example c ontrol con fig in for mControls. js: | |
| 315 | `` ` JavaScri pt | |
| 316 | { | |
| 317 | id : 'newExam ple', | |
| 318 | la bel: 'New Example', | |
| 319 | de velopmentS tatus: fal se, | |
| 320 | co metStatus: false, | |
| 321 | ex ampleForm: true, | |
| 322 | su pportsErro rMessage: false, | |
| 323 | st oryNumber: 1111, | |
| 324 | do cumentatio nURL: "/do cumentatio n/#/adk/fo rm-control s#New-Exam ple" | |
| 325 | } | |
| 326 | `` ` | |
| 327 | :: : | |
| 328 | - **Config ure** the control's sample for m in the d emo page's field con fig manife st: `produ ct/product ion/demo_f iles/form_ components _example/f ields.js` | |
| 329 | - Add an att ribute to the field object (th e large on e in the r eturn stat ement) | |
| 330 | - th e attribut e name sho uld match the **id** attribute in the co ntrol's co nfig in th e form con trol manif est | |
| 331 | - th e value of that attr ibute is a n array of control f ields | |
| 332 | :: : callout | |
| 333 | :: : showcode Example s ample form config fo r newExamp le control in fields .js: | |
| 334 | `` ` JavaScri pt | |
| 335 | re turn { | |
| 336 | newE xample: [{ | |
| 337 | contro l: 'newExa mple', | |
| 338 | name: 'n ewExampleV alue', | |
| 339 | label: ' New Exampl e control here!', | |
| 340 | pickList : [{ | |
| 341 | valu e: 'AL', | |
| 342 | labe l: 'Alabam a' | |
| 343 | }, { | |
| 344 | valu e: 'NY', | |
| 345 | labe l: 'New Yo rk' | |
| 346 | }, { | |
| 347 | valu e: 'VA', | |
| 348 | labe l: 'Virgin ia' | |
| 349 | }] | |
| 350 | }] | |
| 351 | } | |
| 352 | `` ` | |
| 353 | :: : | |
| 354 | - **Map** the contro l to the f orms that require it . This is done by ad ding a str ing (equal to the co ntrol's ** id**) to t he `contro l` array o f each fea ture in `p roduct/pro duction/de mo_files/f eature_for ms/feature Status.js` . Doing th is will le t the feat ure displa y the cont rol as a d ependency. | |
| 355 | :: : callout | |
| 356 | :: : showcode Example o f adding c ontrol to controls a rray in fe atureStatu s.js: | |
| 357 | `` ` Javascri pt | |
| 358 | { | |
| 359 | fe atureNumbe r: 170, | |
| 360 | ti tle: "Vita ls - Enter ed In Erro r", | |
| 361 | wi reframe: " http://h35 2jh.axshar e.com/#p=f 170_vitals _-_entered _in_error_ v_2", | |
| 362 | workflowPa th: "http: // IP /ui-compon ents/docs/ workflow/p si9/workfl ow-vital-e ie.pdf", | |
| 363 | wo rkflowSize : "338KB", | |
| 364 | useCaseSce narioPath: "http:// IP /ui-compon ents/docs/ use-case/p si9/Test-S cenario-vi tals-ELE.p df", | |
| 365 | us eCaseScena rioSize: " 83KB", | |
| 366 | co ntrols: [' input','ch ecklist',' radio','bu tton','con tainer_sho wingModelD ata', 'new Example'], // here!! !!! | |
| 367 | co mponents: ['workflow ','alert', 'growlNoti fications' ], | |
| 368 | no tes: "", | |
| 369 | ex ampleForm: true, | |
| 370 | ha ndOff: { | |
| 371 | trifecta : true, | |
| 372 | dev: tru e | |
| 373 | } | |
| 374 | } | |
| 375 | `` ` | |
| 376 | :: : | |
| 377 | - **Finish ed!** Now the contro l will be mapped to its featur es as well as have a demo form . | |
| 378 | - Here is wh at it woul d look lik e in the F eature Sta tus sectio n: | |
| 379 |  | |
| 380 | - And here i t is in th e Form Con trols Live Demo tabl e: | |
| 381 |  | |
| 382 | - And finall y, here is what it w ould look like in it s sample f orm: | |
| 383 |  | |
| 384 | ||
| 385 | ||
| 386 | ### Docume nting Cont rols ### | |
| 387 | The ADK do cumentatio n lives in `product/ production /documenta tion/adk/` . When inc luding an image, sim ply place the image in the `as sets/` dir ectory. | |
| 388 | ||
| 389 | The import ant part h ere is to accurately group you r control for placem ent within the [Form Controls documentat ion](form- controls.m d) page. A fter you h ave determ ined which group to place your control, simply ins ert its do cumentatio n in alpha betical or der within that grou p. | |
| 390 | ::: defini tion | |
| 391 | Groups: | |
| 392 | - **Basic* *: Simple HTML form controls. New contro ls probabl y won't go in this g roup. (ie. Input, Se lect) | |
| 393 | - **Utilit y**: These controls will have a specific function but are wi dely used. (ie. Date picker, Ch ecklist) | |
| 394 | - **Wrappe rs**: The primary pu rpose of t hese contr ols are to be contai ners for o ther contr ols. (ie. Popover, F ieldset) | |
| 395 | - **Specia l**: These are highl y speciali zed, very complex, a nd not ver y flexible . (ie. Nes ted Commen t Box, Tog gle Option s Checklis t) | |
| 396 | ::: | |
| 397 | ||
| 398 | ::: side-n ote | |
| 399 | **Note**: Make sure to include the confi g options, a sample image (or images), a vailable t rigger eve nts, and s ample code configura tions. | |
| 400 | ::: | |
| 401 | ||
| 402 | ::: callou t | |
| 403 | Once your documentat ion for yo ur control is comple te, be sur e to add a n entry in the [What 's New? Pa ge](change log.md) | |
| 404 | ::: | |
| 405 | ||
| 406 | ||
| 407 | ### Testin g Controls ### | |
| 408 | Coming soo n. |
Araxis Merge (but not the data content of this report) is Copyright © 1993-2016 Araxis Ltd (www.araxis.com). All rights reserved.