OrderCloud 2.0 Documentation. Spec Forms

Transcription

1 OrderClud 2.0 Dcumentatin Using the Spec Frm File Override Spec Frms In OrderClud 2.0, spec frm custmizatin will be accmplished thrugh the spec frm file verride. This is lcated under the OrderClud 2.0 tab within the spec frm link fr the respective prduct. Initially, a default spec frm will be applied t each prduct, but the default spec frm can be replaced with any custm spec frm. Custmizatin t the spec frm is nw dne with btstrap layut and custm directives which will be utlined belw. Btstrap Layut It is recmmended that all custmized spec frm utilize the default frm as a base. General frmat f rws and clumns Within the panel-bdy div n the spec frm, the fllwing frmat will be used t display the rws and clumns f spec fields: <div class="rw"> <div class="cl-xs-12 cl-sm-12 cl-md-3 cl-lg-3"> <custmtextfield custmfield="variant.specs.specname"></ custmtextfield> </div> </div> The rw class defines a single rw n the spec frm. Within each rw, additinal divs with a variatin f the cl class are declared t create ne r mre clumns. Sizing f clumns within rws In basic btstrap layut, rws are brken int 12 clumns. Yu can specify hw big the clumn is by specifying a number 1-12 at the end f the cl class. Fr example, if yu wanted a clumn t stretch half f the rw, yu wuld assign it a number f 6. If yu wanted the clumn t stretch nly a third f the rw, yu wuld assign it a number f N 1 st Avenue, Suite 200, Minneaplis, MN

2 400 N 1 st Avenue, Suite 200, Minneaplis, MN

3 Screen-size and Break-pints The last part in determining the layut f rws and clumns is hw each field will display at different screen-sizes. There are fur different breakpints within ur applicatin: xs, sm, md, lg, which range frm mbile t tablet t desktp sizes. Because mbile r tablet views may nt fit the desktp layut f yur spec fields, yu may want t size them differently between breakpints. In rder t d this, all yu have t d is specify the breakpint size within the cl class. Fr example, if yu wanted a spec frm field t stretch half the screen n desktp view and fully acrss n anything smaller, yu wuld d the fllwing: Class= cl-xs-12 cl-sm-12 cl-md-12 cl-lg-6 Custm Directives Each f the variable specs will be brught int the spec frm thrugh a custm directive. There are many different custm directives, but the three main nes that will be used are custmtextfield, custmselectinfield, and custmfilefield. The nature f the variable spec will determine what custm directive yu use. Each ne f these directives utilizes an attribute called custmfield that is used t display the respective spec field. The general frmat is as fllws: <custmtextfield custmfield= Variant.Specs.SpecName></custmtextfield> where SpecName will be replaced by the respective variable spec name. Variant.Specs is always kept cnstant. Other custm directives, like custmphnefield fr example, wrk in a similar fashin, but just utilize different attributes. The fllwing is a list f the custm directives that are available t use fr spec frm custmizatin: Phne The custm phne field directive is used t cmbine three separate phne spec fields that were used within CmmerceTls, and cnslidate them int ne single field that can be separately labeled and ui-masked. <custmphnefield spec1= spec2= spec3= mask= label= ></ custmphnefield> 400 N 1 st Avenue, Suite 200, Minneaplis, MN

4 Date Time The respective variable spec name is added t each spec attribute in the fllwing way: Variant.Specs.SpecName. The mask is entered using nines as placehlders. Fr example, say yu wanted the mask t be frmatted the fllwing way: Yu wuld enter fr the mask value. The label attribute nly takes characters as input in rder t re-label the spec. The custm date field directive allws the user t utilize a date-picker ppup that inputs the selected date as the spec value. <custmdatefield custmfield= Variant.Specs.SpecName ></ custmdatefield> The custm time field directive allws the user t chse a time using a selectr that inputs the selected time as the spec value. <custmtimefield custmfield= Variant.Specs.SpecName ></ custmtimefield> Checkbx The custm checkbx field directive allws the user t specify a string Text value t set as the spec value based n if the checkbx is checked r unchecked. <custmcheckbxfield custmfield= Variant.Specs.SpecName checked= unchecked= ></custmcheckbxfield> The custm text field directive allws a user t display a variable text spec n the spec frm <custmtextfield custmfield= Variant.Specs.SpecName ></ custmtextfield> Selectin The custm selectin field directive allws a user t display a variable File selectin spec n the spec frm <custmselectinfield custmfield= Variant.Specs.SpecName ></ custmselectinfield> The custm file field directive allws a user t display a variable file spec n the spec frm <custmfilefield custmfield= Variant.Specs.SpecName ></ custmfilefield > 400 N 1 st Avenue, Suite 200, Minneaplis, MN

5 400 N 1 st Avenue, Suite 200, Minneaplis, MN

6 Scripting Scripting lgic fr a custmized spec frm is nw dne within the spec frm itself. An annymus cntrller f the fllwing frmat will need t be included at the tp f the spec frm under the <sectin> tag: <script> functin SpecCntrller($scpe) { $scpe.$watch('', functin(event) { //Scripting }); }; </script> <div ng-cntrller="speccntrller"> //Spec Frm HTML </div> All scripting will g within the cntrller functin and a div with an ng-cntrller attribute specifying the name f the cntrller will need t be placed arund the html cntent in the frm. A $watch allws yu t set a watch expressin, and whenever the specified value changes, an event can be fired. An ng-change can als be used n an element t detect when a value has changed, and then fire a scripting event. This is different frm $watch, because the expressin is nt evaluated when the value change is cming frm the mdel. Scripting can als be dne within the html itself by using angular directives such as nghide and ng-shw. Additinal Infrmatin T change the labels fr the spec fields, use the label field within Variable Specs --> Spec Name. The text replacement tl within the OrderClud 2.0 cnfiguratin tab can als be used fr this as well if desired. 400 N 1 st Avenue, Suite 200, Minneaplis, MN

7 Tken tags can als still be utilized n a spec frm t ppulate fields with default values. If the default value field n the admin side within the variable spec is set, then the field will be ppulated within the UI. 400 N 1 st Avenue, Suite 200, Minneaplis, MN