module _ { function init ( ) { var complexityFieldName = "ComplexityField" ; return CSR . override ( ) . fieldView ( complexityFieldName , SPFieldComplexity_View ) . fieldDisplay ( complexityFieldName , SPFieldComplexity_Display ) . fieldEdit ( complexityFieldName , SPFieldComplexity_Edit ) . fieldNew ( complexityFieldName , SPFieldComplexity_Edit ) . register ( ) ; } var map = { "Default" : { color : "White" , days : 0 } , "V simple" : { color : "Green" , days : 2 } , "Simple" : { color : "Yellow" , days : 3 } , "Average" : { color : "Orange" , days : 6 } , "Complex" : { color : "Red" , days : 10 } , "V complex" : { color : "Maroon" , days : 12 } } ; function SPFieldComplexity_View ( ctx ) { var complexity = < string > ctx . CurrentItem [ ctx . CurrentFieldSchema . Name ] ; return GetDisplayHtml ( complexity ) ; } ; function SPFieldComplexity_Display ( ctx ) { return GetDisplayHtml ( ctx . CurrentFieldValue ) ; } ; function SPFieldComplexity_Edit ( ctx ) { var fieldInternalName = ctx . CurrentFieldSchema . Name ; var dropDownId = fieldInternalName + '_$DropDownChoice' ; var messageId = fieldInternalName + '_$Message' ; ctx . FormContext . registerInitCallback ( fieldInternalName , ( ) => { $addHandler ( $get ( dropDownId ) , "change" , ( e ) => { var val = ( < HTMLSelectElement > $get ( dropDownId ) ) . value ; ctx . FormContext . updateControlValue ( fieldInternalName , val ) ; document . getElementById ( messageId ) . innerHTML = GetDisplayHtml ( val ) ; } ) ; } ) ; ctx . FormContext . registerFocusCallback ( fieldInternalName , ( ) => { $get ( dropDownId ) . focus ( ) ; } ) ; ctx . FormContext . registerValidationErrorCallback ( fieldInternalName , ( errorResult ) => { SPFormControl_AppendValidationErrorMessage ( dropDownId , errorResult ) ; } ) ; return '<span dir="' + STSHtmlEncode ( ctx . CurrentFieldSchema . Direction ) + '">' + GetEditHtml ( ctx , dropDownId , messageId ) + '<br /></span>' ; } ; function GetDisplayHtml ( complexity ) { var pair = map [ complexity ] || map [ "Default" ] ; return "<span style='background-color : " + pair . color + "' >&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;" + complexity + " Effort: " + pair . days ; } function GetEditHtml ( ctx , dropDownId , messageId ) { var valueSet = false ; var select = '<select id="' + STSHtmlEncode ( dropDownId ) + '" title="' + STSHtmlEncode ( ctx . CurrentFieldSchema . Title ) + '" class="ms-RadioText">' ; for ( var choice in map ) { var encodedVal = STSHtmlEncode ( choice ) ; var selectedStr = ! valueSet && ctx . CurrentFieldValue == choice ? 'selected="selected" ' : '' ; valueSet = valueSet ? true : selectedStr != '' ; select += '<option value="' + encodedVal + '" ' + selectedStr + '>' + encodedVal + '</option>' ; } select += '</select>' ; var info = '<span id="' + messageId + '">' + GetDisplayHtml ( ctx . CurrentFieldValue ) + '</span>' ; return select + info ; } SP . SOD . executeOrDelayUntilScriptLoaded ( ( ) => { SP . SOD . executeOrDelayUntilScriptLoaded ( init , "sp-ts-csr.ts" ) ; SP . SOD . executeOrDelayUntilScriptLoaded ( ( ) => { RegisterModuleInit ( SPClientTemplates . Utility . ReplaceUrlTokens ( "~site/Sample_CSRComplexityField/CSRField.js" ) , init ) ; } , "sp.js" ) ; } , "clienttemplates.js" ) ; }