Custom field rendering in modern list views

%3CLINGO-SUB%20id%3D%22lingo-sub-39086%22%20slang%3D%22en-US%22%3ECustom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-39086%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20SharePoint%20Developers%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWe're%20working%20hard%20on%20making%20modern%20lists%20and%20libraries%20more%20extensible.%E2%80%AF%20One%20feature%20that%20we're%20working%20on%20right%20now%20is%20a%20SharePoint%20Framework%20component%20that%20allows%20you%20to%20customize%20the%20rendering%20of%20fields%20inside%20modern%20list%20views.%E2%80%AF%20In%20other%20words%2C%20this%20is%20a%20modern%20version%20of%20the%20classic%20Field.JSLink%20extensibility%20point.%E2%80%AF%20We%20want%20to%20work%20with%20you%20guys%20on%20fleshing%20this%20out%20and%20enabling%20real%20scenarios%20that%20are%20currently%20blocking%20modern%20adoption.%E2%80%AF%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWe'd%20like%20to%20gather%20more%20real-world%20examples%20of%20how%20people%20are%20customizing%20fields%20inside%20list%20views%20today.%E2%80%AF%26nbsp%3BPlease%20help%20us%20out!%20%26nbsp%3BTo%20get%20things%20started%2C%20below%20are%20a%20few%20field%20customization%20patterns%20that%20we're%20aware%20of%20and%20are%20considering%20how%20we%20can%20make%20them%20work%20with%20this%20new%20framework%20component.%E2%80%AF%26nbsp%3B%20We%20want%20to%20hear%20from%20you%20examples%20of%20scenarios%20that%20fit%20one%20of%20these%20patterns%20as%20well%20as%20scenarios%20you've%20encountered%20that%20are%20totally%20different.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3EConditional%20formatting.%E2%80%AF%20%3C%2FSTRONG%3EThis%20is%20applying%20a%20different%20style%20to%20a%20field%20depending%20on%20its%20value.%3C%2FP%3E%0A%3CP%3E%3CEM%3EExample%3C%2FEM%3E%3A%E2%80%AF%20I%20have%20a%20number%20field%20in%20a%20custom%20list%20called%20%22KPI.%22%E2%80%AF%20I%20want%20values%20between%200-20%20in%20this%20field%20to%20be%20shown%20in%20the%20list%20view%20as%20red%3B%2021-40%20as%20yellow%3B%2040%2B%20as%20green.%E2%80%AF%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3ESupplementing%20the%20output%20of%20a%20field%20with%20more%20information%3C%2FSTRONG%3E.%E2%80%AF%20This%20is%20displaying%26nbsp%3Badditional%20data%20inside%20a%20field%20alongside%20the%20data%20that's%20displayed%20by%20default.%3C%2FP%3E%0A%3CP%3E%3CEM%3EExample%3C%2FEM%3E%3A%E2%80%AF%20I%20have%20a%20person%2Fgroup%20field%20that%20stores%20contact%20information.%E2%80%AF%20I%20want%20to%20display%20the%20name%20of%20the%20person's%20division%20next%20to%20their%20name.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3EInserting%20links%20to%20actions%3C%2FSTRONG%3E.%E2%80%AF%20This%20is%20placing%20links%20to%20actions%20on%20a%20list%20item%20within%20that%20list%20item's%20row.%E2%80%AF%20Think%20of%20this%20as%20like%20a%20URL-based%20customaction%2C%20but%20the%20action%20is%20invoked%20by%20clicking%20the%20action's%20URL%E2%80%AFin%20the%20view%20instead%20of%26nbsp%3Bselecting%20that%20item%20and%20clicking%20a%26nbsp%3Bbutton.%E2%80%AF%20We've%20heard%20that%20sometimes%20it's%20easier%20to%20train%20people%20to%20click%20a%20link%20in%20a%20row%20than%20it%20is%20to%20train%20them%20to%20select%20the%20item%20and%20find%20the%20right%20button%20in%20our%20menus.%3C%2FP%3E%0A%3CP%3E%3CEM%3EExample%3C%2FEM%3E%3A%E2%80%AF%20I%20have%20a%20field%20in%20a%20document%20library%20called%20%22Kick%20off%20Approval%20Workflow.%22%E2%80%AF%20Client%20side%20code%20constructs%20a%20URL%20that%20kicks%20off%20an%20approval%20workflow%20(in%20SharePoint%20or%20in%20another%20system)%20for%20the%20item%20in%20question%20and%20places%20that%20URL%20inside%20that%20column.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-264980%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-264980%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Lincoln%2C%20any%20update%20on%20the%20ability%20to%20format%20list%20items%3F%20Thanks%20for%20your%20hard%20work%20here!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-217913%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-217913%22%20slang%3D%22en-US%22%3E%3CP%3EThe%20most%20often%20use%20of%20CSR%20in%20my%20solutions%20was%20to%20customize%20field%20rendering%20in%20list%20forms%20to%3A%3C%2FP%3E%3CUL%3E%3CLI%3EMake%20fields%20read%20only%3C%2FLI%3E%3CLI%3EHide%20fields%3C%2FLI%3E%3CLI%3EPre-fill%20field%20values%20(e.%20g.%20from%20URL%20parameters)%3C%2FLI%3E%3CLI%3EImplement%20field%20conditions%20(hide%2Fshow%20fields%20based%20on%20other%20field%20values%2C%20URL%20parameters%20etc)%3C%2FLI%3E%3C%2FUL%3E%3CP%3EAdditionally%20I%20used%20CSR%20to%3A%3C%2FP%3E%3CUL%3E%3CLI%3EDevelop%20custom%20field%20type%3C%2FLI%3E%3CLI%3EImplement%20conditional%20formatting%3C%2FLI%3E%3CLI%3EHide%20a%20part%20of%20long%20strings%20in%20list%20view%3C%2FLI%3E%3CLI%3ERender%20field%20content%20as%20hyperlink%3C%2FLI%3E%3CLI%3EReplace%20field%20content%20or%20hide%20field%20content%20in%20list%20view%3C%2FLI%3E%3C%2FUL%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-174424%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-174424%22%20slang%3D%22en-US%22%3E%3CP%3EYes%2C%20after%208%20years%20(since%20SP2010)%20Microsoft%20blocked%20the%20use%20of%20HTML%20in%20Calculated%20Columns%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EOnly%20workaround%20now%20is%20to%20convert%20the%20bare%20HTML%20back%20to%20HTML%20**after**%20the%20page%20is%20displayed%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EJust%20like%20we%20did%20in%20SP2007%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EJavaScript%20code%20is%20at%3A%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fsharepoint.stackexchange.com%2Fquestions%2F218102%2Fjune-13th-2017-microsoft-blocked-handling-html-markup-in-sharepoint-calculated-f%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsharepoint.stackexchange.com%2Fquestions%2F218102%2Fjune-13th-2017-microsoft-blocked-handling-html-markup-in-sharepoint-calculated-f%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-174206%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-174206%22%20slang%3D%22en-US%22%3E%3CP%3EThank%20you%20for%20the%20suggestion.%26nbsp%3B%20We%20should%20set%20expectations%20properly%20in%20the%20settings%20page%20that%20the%20JSON%20formatting%20only%20works%20in%20modern%20mode.%26nbsp%3B%20I%20will%20file%20a%20bug%20and%20get%20this%20taken%20care%20of.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%26nbsp%3Bbest%20way%20to%26nbsp%3Bapply%26nbsp%3Bconditional%20formatting%20in%20list%20views%20in%20classic%20is%20to%20use%20JSLink.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-173860%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-173860%22%20slang%3D%22en-US%22%3E%3CP%3ELooks%20like%20the%20%22calculated%20field%20trick%22%20to%20format%20a%20field%20is%20long%20gone%3A%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fsupport.microsoft.com%2Fen-us%2Fhelp%2F4032106%2Fhandling-html-markup-in-sharepoint-calculated-fields%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsupport.microsoft.com%2Fen-us%2Fhelp%2F4032106%2Fhandling-html-markup-in-sharepoint-calculated-fields%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Ea)%20Why%20does%20SharePoint%20show%20the%20JSON%20box%20when%20it%20doesn't%20even%20work%20for%20%22classic%20experience%22.%26nbsp%3BMicrosoft%20should%20at%20least%20display%20an%20informational%20message%20or%20warning.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Eb)%20Please%20suggest%2C%20is%20there%20a%20way%20to%20format%20the%20background%20color%20of%20column%20in%20classic%20experience%3F%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAppreciate%20any%20help.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-170773%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-170773%22%20slang%3D%22en-US%22%3E%3CP%3ESounds%20like%20a%20great%20solution.%20Intuitive%20and%20user%20friendly.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-170667%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-170667%22%20slang%3D%22en-US%22%3E%3CP%3EThank%20you.%20Do%20you%20know%20when%20this%20will%20be%20available%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-170665%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-170665%22%20slang%3D%22en-US%22%3E%3CP%3EWe%20are%20working%20on%20better%20functionality%20for%20resizing%20columns.%26nbsp%3B%20You%20won't%20need%20the%20column%20formatter%20for%20this.%26nbsp%3B%20We'll%20let%20you%26nbsp%3Bclick%20and%20drag%20to%20resize%2C%20and%20then%20you%20can%20save%20that%20width%20in%20your%20current%20view.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-170592%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-170592%22%20slang%3D%22en-US%22%3E%3CP%3EIf%20it%20is%20only%20for%20you%2C%20then%20let%20your%20Browser%20make%20that%20change.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EInstall%20a%20Browser%20plugin%20like%20Stylish%2C%20which%20always%20applies%20the%20CSS%20on%20the%20loaded%20page%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3Etable%5Bsummary*%3D'Document'%5D%20tbody%20TD%5Bclass*%3D'ms-vb-title'%5D%20DIV%7B%0A%20%20%20%20background%3Apink%3B%0A%20%20%20%20max-width%3A10em%3B%0A%20%20%20%20overflow%3Ahidden%3B%0A%7D%3C%2FPRE%3E%0A%3CP%3E%26gt%3B%20Get%20the%20Table%20with%20'Document'%20in%20the%20name%3C%2FP%3E%0A%3CP%3E%26gt%3B%20goto%20the%20TBODY%3C%2FP%3E%0A%3CP%3E%26gt%3B%20get%20the%20TD%20which%20has%20the%20(default)%20SP%20Title%3C%2FP%3E%0A%3CP%3E%26gt%3B%20get%20the%20DIV%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26gt%3B%20Apply%20CSS%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ESame%20concept%20but%20totally%20different%20CSS%20Selector%20can%20be%20applied%20to%20a%20Modern%20Page%20(I%20don't%20have%20one%20at%20hand%3B%20learn%20CSS)%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-169544%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-169544%22%20slang%3D%22en-US%22%3E%3CP%3ECan%20I%20just%2C%20please%2C%20change%20the%20width%20of%20the%20Name%20field%3F%20I%20have%20one%20list%20in%20one%20site%20that%20I'm%20the%20only%20user%20of%20and%20the%20names%20are%20extraordinarily%20large%20because%20they%20are%20coming%20from%20Dynamics%20CRM.%20(Dynamics%20is%20concatenating%20the%20Organization%20Name%20with%20the%20GUID.)%20This%20is%20making%20data%20management%20quite%20difficult%20for%20me%2C%20a%20super%20user%2C%20with%20no%20time%20to%20learn%20JSON.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-122617%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-122617%22%20slang%3D%22en-US%22%3E%3CP%3EI%20was%20able%20to%20do%20this%20in%20classic%20view%20with%20JS%20Script%20code.%26nbsp%3B%3C%2FP%3E%3CP%3ENew%20list%20form%3A%20Hide%20particular%20fields%3C%2FP%3E%3CP%3EView%20list%20form%3A%20View%20those%20fields%20which%20are%20automatically%20filled%20via%20Microsoft%20Flow%20trigger.%3C%2FP%3E%3CP%3EEdit%20list%20form%3A%20Make%20those%20fields%20Read%20only.%3C%2FP%3E%3CP%3ESo%2C%20the%20point%20is%20to%20modify%20list%20fields%20based%20on%20NEW%2FVIEW%2FEDIT%20form%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-105730%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-105730%22%20slang%3D%22en-US%22%3ESeems%20to%20be%20the%20course%20of%20things.%20For%20me%20it's%20also%20much%20new%20stuff%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-105129%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-105129%22%20slang%3D%22en-US%22%3E%3CP%3ECool%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWith%20(old)%20Microsoft%20CSR%20code%20you%20could%20do%20this%20with%2010%20lines%20of%20code%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20new%20way%20of%20doing%20it%20requires%2076%20lines%20of%20code%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%20as%20a%20rull%20of%20thumb%20we%20can%20say%20conversion%20to%20the%20new%20stuff%20takes%208%20x%20CSR%20%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-105028%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-105028%22%20slang%3D%22en-US%22%3E%3CP%3EA%20solution%20for%20conditional%20formatting%20of%20modern%20ui%20lists%20provided%20by%20Waldek%20Mastykarz%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-extensions%2Ftree%2Fmaster%2Fsamples%2Fjs-field-conditionalformatting%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-extensions%2Ftree%2Fmaster%2Fsamples%2Fjs-field-conditionalformatting%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20feature%20is%20only%20available%20in%20the%20Dev-Version%20or%20in%20First%20Release%20mode%20(Setting%20in%20the%20Admin%20Center)%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-95255%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-95255%22%20slang%3D%22en-US%22%3EThanks%20Lincoln%2C%20sounds%20good.%3CBR%20%2F%3EWhat%20is%20the%20best%20place%20to%20look%20for%20further%20updates%20on%20this%20item%3F%20This%20community%3F%3CBR%20%2F%3E%3CBR%20%2F%3EKind%20regards%2C%20Jos%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-91764%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-91764%22%20slang%3D%22en-US%22%3E%3CP%3EThe%20recently%20announced%26nbsp%3BFramework%20Extensions%20should%20be%20helpful%20for%20this%20when%20they%20become%20available%2C%20see%20%3CA%20href%3D%22https%3A%2F%2Fdev.office.com%2Fblogs%2Fbuild-integrated-user-experiences-with-new-capabilities-of-sharepoint-and-onedrive%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdev.office.com%2Fblogs%2Fbuild-integrated-user-experiences-with-new-capabilities-of-sharepoint-and-onedrive%3C%2FA%3E.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-91752%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-91752%22%20slang%3D%22en-US%22%3E%3CP%3EAlthough%20unrelated%20to%20this%20thread%2C%20but%20would%20like%20to%20have%20'breadcrumbs'%20in%20overall%20sharepoint.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPossibly%20small%20development%20but%20will%20have%20tremendous%20benefits%2C%20starting%20with%20lesser%20load%20on%20servers%20since%20users%20would%20not%20be%26nbsp%3Bscrambling%20through%20the%20stuff.%20Lesser%20clicks%20by%20directly%20going%20to%20desired%20%22leaf%22%20instead%20of%20doing%20back%20buttons%20and%20loading%20interim%20'unwanted'%20pages%20etc.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPlease%20guide%20if%20there%20is%20already%20something%20in%20place%20right%20out%20of%20the%20box.%20The%203rd%20party%20apps%20falls%20out%20of%20favour%20too%20soon%20to%20catch-up%20with%20the%20pace%20of%20fast%20moving%20office-365.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-88285%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-88285%22%20slang%3D%22en-US%22%3E%3CP%3EPlease%20allow%20the%20calendars%20to%20display%20tasks%20with%20conditional%20formatting.%3CBR%20%2F%3EThank%20you%20very%20much%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-87172%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-87172%22%20slang%3D%22en-US%22%3E%3CP%3EIn%20regards%20to%20Conditional%20Formatting%2C%20i%20would%20like%20to%20suggest%20that%20you%20try%20to%20replicate%20the%20functionality%20provided%20in%20Excel%20for%20this%20and%20then%20try%20to%20duplicate%20Excels%20Number%20formating%20options.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-87165%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-87165%22%20slang%3D%22en-US%22%3E%3CP%3EWe%20agree%20that%20a%20simple%20scenario%20like%20highlighting%20a%20due%20date%20should%20not%20require%20custom%20code.%20%26nbsp%3BThe%20calculated%20field%20trick%20was%20an%20unsupported%20hack%2C%20but%20it%20really%20demonstrated%20a%20need%20to%20accomplish%20simple%20customizations%20like%20this%20in%20a%20codeless%20way.%20%26nbsp%3BWe%20are%20working%20on%20a%20documented%2C%20supported%20way%20to%20accomplish%20this%2C%20and%20more%2C%20but%20we%20have%20no%20timelines%20to%20announce%20yet.%20%26nbsp%3BThere%20will%20definitely%20be%20more%20information%20on%20this%20by%20Ignite.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-87008%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-87008%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Team%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFor%20most%20customers%20I've%20worked%20with%20so%20far%2C%20i%20think%20this%20covers%20quite%20a%20lot%20(80%25)%20basic%26nbsp%3Buse%20cases.%3C%2FP%3E%3CP%3EIf%20you%20take%20it%20much%20further%2C%20you're%20closer%20to%20building%20a%20business%20application%2C%20or%20custom%20pages%20etc.%3C%2FP%3E%3CP%3EI%20used%20the%20calculated%20column%20trick%20with%20HTML%20many%20times%2C%20although%20it%20was%20not%20ideal%20it%20worked%20out%20very%20nice.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPlease%20consider%20the%20scenario%20in%20which%20for%20example%20a%20due%20date%20is%20highlighted%20in%20red.%20With%20the%20calculated%20column%20trick%20this%20was%20not%20possible%20becuase%20the%20column%20value%20was%20only%20calculated%20during%20an%20edit%2C%20and%20not%20real%20time%20during%20rendering.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20there%20anytihing%20you%20can%20tell%20when%20(i%20know%20this%20is%20always%20hard..)%20%26nbsp%3Bsome%20of%20this%20functionality%20is%20expected%20to%20be%20available%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20very%20much%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EJos%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-83937%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-83937%22%20slang%3D%22en-US%22%3EYou're%20right.%20%20This%20will%20be%20fixed%20in%20the%20service%20in%20the%20next%20two%20weeks.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-82782%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-82782%22%20slang%3D%22en-US%22%3E%3CP%3ESo%2C%20I'm%20sure%20someone%20else%20has%20already%20spotted%20this%2C%20but%20if%20I%20create%20a%20new%20page%20with%20the%20modern%20UI%20and%20add%20the%20Lists%20(preview)%20webpart%20and%20select%20my%20list%20with%20the%20calculated%20column%20in%20it%2C%20my%20button%20renders!!!%20If%20inspect%20the%20element%20the%20URL%20is%20correct%2C%20however%20if%20I%20click%20the%20button%20itself%20it%20takes%20me%20to%20the%20item%20form%20rather%20than%20the%20URL%20defined%20in%20the%20HTML.%20Bizarre%20and%20inconsistent%20behaviour.%26nbsp%3B%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F16519i85F975F5CD12B663%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Capture.JPG%22%20title%3D%22Capture.JPG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAnyone%20else%20seeing%20this%20and%20even%20better%2C%20explain%20this%3F%3F%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-82467%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-82467%22%20slang%3D%22en-US%22%3EThanks%20so%20much%20for%20the%20directions.%20I'll%20checkout%20the%20JSLink%20and%20CustomActions.%3CBR%20%2F%3E%3CBR%20%2F%3EWill%20add%20to%20list%20if%20anything%20else%20comes%20to%20mind.%20One%20thing%20a%20user%20asked%20recently%20was%20to%20see%20the%20'Modified%20Date'%20in%20classic%20date%2Ftime%20formats%20(like%20YYYY%2FMM%2FDD%20HH%3AMM)%2C%20instead%20of%20%22June%209%22%20or%20%22Few%20seconds%20ago%22%20etc.%20I%20know%20the%20'shaded'%20view%20shows%20dates%20in%20classic%20format%2C%20but%20in%20shaded%20view%2C%20I%20vaguely%20recall%20there%20were%20other%20features%20which%20were%20not%20desirable.%20So%20the%20%22display%22%20of%20date%20could%20also%20be%20customized%20within%20the%20%22list%20settings%22%20or%20%22site%20settings%22.%20I%20know%20there%20is%20one%20setting%20at%20the%20%22collection%20level%22%20but%20that%20impacts%20the%20whole%20organization.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-82460%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-82460%22%20slang%3D%22en-US%22%3E%3CP%3EWe%20do%20not%20have%20any%20plans%20to%20add%26nbsp%3Bfunctionality%20to%20SharePoint%20Designer.%20%26nbsp%3BWe're%20working%20on%20some%20in-browser%20stuff%20for%20specifying%20field%20formatting%20for%20modern%20list%20views.%20%26nbsp%3BScenarios%26nbsp%3Bthat%20are%20top%20of%20mind%20for%20us%3A%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3ECreating%20%22action%20buttons%22%20that%20point%20to%20a%20parameterized%20URL%20based%20on%20metadata%20on%20the%20current%20item%3C%2FLI%3E%0A%3CLI%3EConditional%20formatting%3C%2FLI%3E%0A%3CLI%3ESeverity%20coding%20-%20highlighting%20items%20that%20need%20attention%3C%2FLI%3E%0A%3CLI%3ELightweight%20data%20visualizations%2C%20like%20data%20bars%20and%20trending%20indications%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3EAnything%26nbsp%3Belse%20come%20to%20mind%3F%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFor%20the%20time%20being%2C%20if%20you%20want%20to%20accomplish%20this%20stuff%2C%20you'll%20need%20to%20look%20at%20JSLink%20and%20CustomAction%20(if%20you're%20in%20classic)%20or%20the%20SP%20Framework%20Extension%20stuff%20that's%20in%20Developer%20Preview%20(if%20you're%20in%20modern)%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-82458%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-82458%22%20slang%3D%22en-US%22%3E%3CP%3EHello%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F3771%22%20target%3D%22_blank%22%3E%40Lincoln%20DeMaris%3C%2FA%3E%3C%2FP%3E%3CP%3E%3CBR%20%2F%3EThanks%20for%20guidance.%20Are%20there%20plans%20for%20SPD%202013%20to%20have%20the%20conditional%20formatting%20options%20like%20the%20one%20available%20in%20SPD%202010%20%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20SharePoint%20Online%2C%20for%20conditional%20formatting%26nbsp%3Bwe%20tried%26nbsp%3Bputting%20HTML%20code%20in%20the%26nbsp%3Bcolumn's%26nbsp%3B%22formula%22%26nbsp%3Bfield%20and%20it%20does%20work.%20From%20the%20overall%20stability%20point%2C%20is%20this%20%22work%20around%22%20advisable%20or%20are%20there%20other%20preferred%20techniques%20I%20should%26nbsp%3Bread%20about%20first.%20At%20our%20shop%20(being%20small%20setup)%20we%20follow%20the%20policy%20of%20'no%20customization'%20to%20out-of-box%20features%2C%20hence%20wanted%20to%20check%20what%20would%20be%20best%20for%20us%20in%20the%20meanwhile%20SPD%202013%20has%20all%20the%20features.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAppreciate%26nbsp%3Bthe%20guidance.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-82448%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-82448%22%20slang%3D%22en-US%22%3E%3CP%3EYes%20-%20we're%20working%20on%20a%20new%2C%20improved%20way%20to%20accomplish%20those%20same%20tricks%20that%20isn't%2C%20at%20the%20same%20time%2C%20a%20way%20for%26nbsp%3Bsite%20contributors%20to%20put%20arbitrary%20script%20on%20list%26nbsp%3Bview%20pages.%20%26nbsp%3BWe%20will%20announce%20more%20in%20the%20next%20month%20or%20two.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-82355%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-82355%22%20slang%3D%22en-US%22%3E%3CP%3EIs%20this%20the%20right%20room%20for%20the%20old%20Calculated%20column%20HTML%20render%20trick%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt%20was%20lovely%20being%20able%20to%20dynamically%20render%20a%20JS%20button%20or%20an%20HTML%20link%20in%20a%20SharePoint%20column%20and%20would%20dearly%20love%20this%20to%20be%20made%20available%20again%20please%3F%20It%20was%20so%20easy%20and%20provided%20many%20solutions.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-66517%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-66517%22%20slang%3D%22en-US%22%3E%3CP%3EHello%20Lincoln%2C%3C%2FP%3E%3CP%3EThanks%20for%20the%20great%20efforts%20of%20checking%20the%20community%20for%20the%20featuresand%20ensuring%20supporting%20the%20most%20prevalent%20scanarios%20in%20the%20modern%20UIs.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20my%20shop%20we%20are%20on%20Office-365%20and%20Sharepoint%20Online.%20I%20had%20couple%20of%20naive%20queries.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ea)%20We%20migrated%20from%20on-premise%20SharePoint%202010%20into%20the%20Office-365.%20I%20see%20some%20of%20the%20lists%20has%20conditional%20formatting%20and%20the%20conditional%20formatting%20reflect%20fine%20in%20Office-365%20as%20well.%20%26nbsp%3BI%20am%20not%20sure%20if%20the%20vendor%20who%20helped%20migrate%20to%20Office-365%20did%20any%20manual%20tweaks%20in%20the%20code%20to%20have%20the%20conditional%20formatting%20remain%20as%20is.%20%26nbsp%3BI%20was%20trying%20to%20find%20out%20if%20there%20is%20a%20way%20in%20office-365%20and%20SahrePoint%20Designer%202013%20to%20conditional%20format%20the%20columns.%20%26nbsp%3BAlthough%20I%20see%20the%20conditional%20formatting%20working%20in%20lists%2C%20but%20I%20am%20not%20able%20to%20figure%20out%20how%20the%20conditional%20formatting%20was%20put%20in%20place%20for%20this%20list.%20The%20SharePoint%20Designer%202013%20doesn't%20have%20any%20conditional%20formatting%20options%20(although%20SharePoint%20Design%202010%20had%20those%20option%20I%20assume).%20Please%20correct%20me%2C%20does%20SharePoint%20Designer%202013%20not%20have%20the%20conditional%20formatting%20options%3F%20I%20must%20be%20wrong%2C%20please%20guide.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eb)%20To%20achieve%20the%20conditional%20formatting%20in%20Office-365%20I%20was%20contemplating%20the%20option%20of%20putting%20HTML%20code%20in%20the%20'formula'%20of%20the%20field%20(instead%20of%20modifying%20the%20out%20of%20the%20box%20HTML%20code%20using%26nbsp%3BSharePoint%20Designer%202013).%20e.g.%20to%20color%20a%20field%20'A'%20based%20on%20the%20values%20from%20field%20B%2C%20put%20an%20HTML%20in%20the%20'formula'%20of%20field%20'A'%20as%20below%3A%3C%2FP%3E%3CP%3E%3D%22%3C%2FP%3E%3CDIV%20style%3D%22'background%3A%26quot%3B%26amp%3BIF(%5B%26lt%3BSTRONG%22%3EB%5D%26lt%3B15%2C%22lightcoral%22%2CIF(%5B%3CSTRONG%3EB%3C%2FSTRONG%3E%5D%26lt%3B30%2C%22yellow%22%2C%22white%22))%26amp%3B%22%3Bcolor%3Ablack%3Bfont-weight%3Abold%3Btext-align%3Acenter'%26gt%3B%22%26amp%3B%5BB%5D%26amp%3B%22%3C%2FDIV%3E%22%3CP%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20this%20option%20safe%20and%20advisable%20to%20use%20if%20the%20point%20(a)%20above%20is%20true%20and%20we%20don't%20have%20yet%20the%20other%20%22out-of-box%22%20means%20to%20do%20conditional%20formatting%20in%20Office-365.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ec)%20With%20the%20recent%20Office-365%20release%20in%20April%2C%202017%2C%20one%20of%20the%20user%20expereienced%20an%20'unwanted'%20UI%20change%20and%20I%20was%20not%20100%25%20certain%20if%20this%20is%20release%20related.%20Please%20see%20%3CA%20title%3D%22Share%20Point%20Online%20Check-in%2FCheck-out%20-%20User%20Interface%2C%20UX%22%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2FSharePoint%2FIssues-in-Check-In-Check-Out-Possibly-Recent-Releases%2Fm-p%2F65085%23M6176%22%20target%3D%22_blank%22%3Ehere%3C%2FA%3E.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EMany%20thanks.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EVivek%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-57642%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-57642%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20there%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAbility%20to%20trigger%20%3CSTRONG%3Easync%20refresh%3C%2FSTRONG%3E%20of%20a%20view%20would%20be%20much%20needed.%20For%20example%20clicking%20an%20action%20on%20a%20list%20item%20opens%20a%20dialog%20and%20on%20dialog%20close%20you%20need%20to%20load%20the%20new%20values%20in%20the%20view%20without%20reloading%20the%20page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAlex%20M.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-57234%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-57234%22%20slang%3D%22en-US%22%3E%3CP%3EDont't%20forget%20to%20include%20promises%20for%26nbsp%3Bgetting%20field%20value%20when%20saving%2C%20e.g.%20on%20saving%20I%20need%20to%20get%20other%20field%20value%20and%20then%20recalculate%20using%20values%20from%20other%20list.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-40487%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-40487%22%20slang%3D%22en-US%22%3E%3CP%3EYou%20rant%20and%20shout%20and%20curse%3F%20%26nbsp%3BI%20hadn't%20noticed!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWe%20are%20talking%20about%20custom%20script%20in%20the%20modern%20UI%20here.%20%26nbsp%3BThe%20custom%20scripting%20story%20for%20classic%20UI%20is%20unlikely%20to%20change%20too%20much%20going%20forward.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-40395%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-40395%22%20slang%3D%22en-US%22%3E%3CP%3E%26gt%3B%26gt%3B%26nbsp%3B%3CSPAN%3EIf%20the%20scoped%20APIs%20don%E2%80%99t%20do%20what%20you%20want%20right%20away%2C%20you%20can%20try%20to%20do%20things%20the%20%E2%80%9Cold%20way%E2%80%9D%20with%20all%20the%20known%20caveats.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EIs%20this%20the%20Classic%20mode%20option%20or%20can%20we%20apply%20scripts%20in%20Modern%20Experiences%3F%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EAt%20the%20moment%20all%20my%20clients%20are%20forced%20to%20use%20Classic%20mode%20because%20I%20am%20unable%20to%20give%20them%20what%20they%20want%2C%20%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3Ein%20Modern%20Experiences.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20am%20not%20doubting%20technology%20choices%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3E%3CBR%20%2F%3EI%20am%20faced%20with%20Clients%20who%20have%20had%20nice%20colored%20tables%20and%20Priority%20fields%20since%20SP2013%2C%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3Emoved%20to%20the%20Cloud%20and%20now%20want%20those%20in%20SPOnline%20too.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20have%20actually%20lost%20a%20Client%20because%20she%20wouldn't%20believe%20me%20it%20wasn't%20possible%20in%20Modern%20Experiences%2C%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3Eshe%20said%20a%20MVP%20at%20a%20conference%20told%20her%20Everything%20was%20possible%20now%20with%20React.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20am%20not%20an%20MVP%20with%20all%20the%20insights%2C%20priviliged%20information%20and%20a%20year%20headstart%20in%20all%20this%2C%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20am%20just%20an%20a*hole%20trying%20to%20making%20a%20living%20in%20a%20market%20in%20flux.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3ESo%2C%20Yes%2C%20I%20rant%20and%20shout%20and%20curse%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-40259%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-40259%22%20slang%3D%22en-US%22%3E%3CP%3EDanny%2C%20what%20you%20are%20proposing%20is%20what%20we%20are%20planning%20on%20building.%26nbsp%3B%20Through%20a%20stable%20API%2C%20we%20plan%20on%20making%20available%20the%20DOM%20elements%20that%20contain%20list%20view%20fields%2C%20so%20you%20don%E2%80%99t%20have%20to%20search%20for%20specific%20elements%20via%20ID%2C%20attribute%2C%20etc.%26nbsp%3B%20Once%20you%20have%20the%20DOM%20element%2C%20you%20should%20be%20able%20to%20do%20anything%20you%20want%20to%20it.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20reason%20we%20talk%20about%20this%20work%20in%20terms%20of%20%E2%80%9Cscenarios%E2%80%9D%20is%20because%20we%20plan%20on%20being%20pretty%20selective%20about%20which%20DOM%20elements%20on%20modern%20pages%20that%20we%20support%20being%20accessed%20and%20manipulated%20in%20this%20manner.%26nbsp%3B%20We%20will%20start%20with%20a%20small%20set%20and%20enable%20more%20and%20more%20as%20time%20goes%20on%2C%20based%20on%20feedback%20from%20the%20community%20about%20the%20customization%20scenarios%20that%20are%20necessary.%26nbsp%3B%20The%20reason%20we%E2%80%99re%20doing%20it%20this%20way%20is%20because%20we%20want%20to%20guarantee%20these%20customizations%20will%20work%20going%20forward%20as%20we%20evolve%20our%20UX.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWe%20are%20aware%20that%20once%20we%20give%20developers%20the%20ability%20to%20place%20custom%20code%20on%20pages%20in%20SharePoint%2C%20the%20developer%20has%20access%20to%20every%20DOM%20element%20on%20the%20page%2C%20not%20just%20elements%20that%20we%20provide%20through%20our%20stable%20API.%26nbsp%3B%20However%2C%20we%20don%E2%80%99t%20guarantee%20good%20results%20if%20you%20take%20advantage%20of%20this%3B%20these%20customizations%20tend%20to%20break%20when%20the%20product%20team%20makes%20changes%20to%20the%20out%20of%20the%20box%20pages%20and%20controls.%26nbsp%3B%20This%20is%20really%20nothing%20new%20%E2%80%93%20it%20has%20always%20been%20the%20plight%20of%20the%20SharePoint%20developer.%26nbsp%3B%20The%20difference%20is%20that%20today%2C%20we%E2%80%99re%20trying%20to%20give%20developers%20better%20options%20in%20the%20form%20of%20scoped%20APIs%20that%20allow%20you%20to%20create%20customizations%20that%20are%20robust%20against%20future%20product%20changes.%26nbsp%3B%20If%20the%20scoped%20APIs%20don%E2%80%99t%20do%20what%20you%20want%20right%20away%2C%20you%20can%20either%20give%20us%20feedback%20and%20we%E2%80%99ll%20try%20to%20build%20the%20right%20APIs%20in%20the%20right%20order%20to%20address%20most%20common%20needs%2C%20or%20you%20can%20try%20to%20do%20things%20the%20%E2%80%9Cold%20way%E2%80%9D%20with%20all%20the%20known%20caveats.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-39948%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-39948%22%20slang%3D%22en-US%22%3E%3CP%3EBut%20most%20of%20those%20MSDN%20Client%20Side%20Rendering%20examples%20are%20....%20okay%20I'll%20be%20nice%20because%20you%20can't%20expect%20all%20%22Programmers%22%20to%20understand%20WebDesign....%20not%20really%20smart%26nbsp%3B%3C%2FP%3E%3CP%3E%3CIMG%20src%3D%22http%3A%2F%2Fi.imgur.com%2FlqG1UqN.jpg%22%20border%3D%220%22%20alt%3D%22%22%20width%3D%22431%22%20height%3D%2294%22%20%2F%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhat%20a%20Fronteer%20wants%20is%20to%20be%20able%20to%20use%20the%20standard%20Browser%20technologies.%3C%2FP%3E%3CP%3EWhy%20(For%20G.%20Sake!)%20create%20HTML%20and%20apply%20styling%20with%20code%20if%20the%20Browser%20can%20do%20it%20for%20you%20%3F%3F%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3BThat%20means%20we%20need%20to%20be%20able%20to%20set%20HTML5%20Data-Attributes%20on%20DIVs%20that%20make%20up%20the%20rows%2Fcells%20in%20the%20Modern%20Experience%20%22Tables%22%3C%2FP%3E%3CP%3EAll%20we%20need%20then%20to%20color%20a%20whole%20row%20is%20a%20CSS%20selector%20like%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ETR%20%5Bdata-priority*%3D'High'%5D%20%7B%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3Bbackground-color%3A%23F00%3B%3C%2FP%3E%3CP%3E%7D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENote%3A%20this%20idea%2Fapplication%20is%20now%20(C)%20Danny%20Engelman%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3ESo%20NO%20Microsoft!%3C%2FSTRONG%3E%3CBR%20%2F%3E%3CSTRONG%3EDo%20not%20built%20this%20as%20a%20%22scenario%22%2C%20because%20I%20will%20sue%20you%3C%2FSTRONG%3E%3CBR%20%2F%3E%3CSTRONG%3EWe%20want%20100%25%20JavaScript%20access%20in%20the%20Modern%20Experiences%3C%2FSTRONG%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-39583%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-39583%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20no%20idea%20how%20you%20want%20to%20support%20certain%20scenarios%20only%20without%20customers%20beeing%20upset%20again.%20I%20am%20pretty%20sure%20you%20still%26nbsp%3Bremember%20very%20well%26nbsp%3Bwhat%20happend%20when%20you%20released%20the%20modern%20document%20library.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBut%26nbsp%3BI%20think%20it%20is%20a%20very%20good%20idea%20to%20ask%20the%20community%20before%20the%20rollout%26nbsp%3Bthis%20time.%20So%20thank%20you%20for%20that!%20Now%20I%20only%20hope%20that%20you%20will%20think%20again%26nbsp%3Babout%20the%20idea%20to%20support%20certain%20scenarios%20only.%20A%20generic%20solution%20will%20be%20much%20better....%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHere%20is%20a%20very%20good%20list%20of%20what%20people%20have%20been%20doing%20and%20what%20was%20possible%20with%20jslink%20in%20the%20past%3A%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fcode.msdn.microsoft.com%2Foffice%2FClient-side-rendering-JS-2ed3538a%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcode.msdn.microsoft.com%2Foffice%2FClient-side-rendering-JS-2ed3538a%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20you%20can%20support%20all%20those%20scenarios%2C%20I%20think%20you%20are%20on%20the%20right%20track!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-39301%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-39301%22%20slang%3D%22en-US%22%3E%3CP%3EInteresting%20word%20choice%20and%20double%20negatives%20refering%20%26nbsp%3Bto%20double%20negatives.%20Are%20you%20sure%20you%20are%20in%20a%20Dev%20team%20and%20not%20from%20Legal%3F%3CBR%20%2F%3EI%20am%20not%20a%20native%20speaker%2C%20so%20interpretation%20took%20some%20minutes..%3CBR%20%2F%3E%3CBR%20%2F%3ESo%2C%20the%20answer%20is%3A%20Yes%2C%20Microsoft%20is%20working%20on%20scenarios%20to%20NOT%20allow%20generic%20scripting.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-39199%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-39199%22%20slang%3D%22en-US%22%3E%3CP%3EGeneric%20scripting%20is%20powerful%2C%20but%20it%20tends%20to%20be%20fragile%20-%20customizations%20tend%20to%20break%26nbsp%3Bwhen%20we%20change%20our%20default%20UI.%20%26nbsp%3BJust%20ask%20our%20support%20team!%20%26nbsp%3BSo%20we%20want%20to%20focus%20more%20of%20our%20efforts%20around%20making%26nbsp%3Bspecific%20scenarios%20work%20in%20a%20robust%2C%20guaranteed%20way.%20%26nbsp%3BWe%20want%20to%20build%20developer%20contracts%20that%20ensure%20certain%20scenarios%20(and%20scenario%20patterns)%26nbsp%3Bwill%20work%20consistently%20as%26nbsp%3Bwe%26nbsp%3Bmake%20continuous%20updates%20to%20the%20service.%20%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAll%20that%20said%2C%20we%20have%20definitely%20not%20precluded%20giving%20developers%20the%20ability%20to%20do%20generic%20JSLink%2FCustomAction%20scripting%20on%20our%20pages%20-%26nbsp%3Bbut%20we're%20trying%20to%20figure%20out%20how%20far%20we%20can%20get%20without%20doing%20that.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-39122%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-39122%22%20slang%3D%22en-US%22%3E%3CP%3ESo%20you%20are%20**%3CSTRONG%3Enot%3C%2FSTRONG%3E**%20going%20to%20allow%20generic%20Client%20Side%20Rendering%2FDisplay%20Templates%2FJSLink%20scripting%3CBR%20%2F%3Eas%20was%20implemented%20in%20SharePoint%202013.%3C%2FP%3E%3CP%3E%3CBR%20%2F%3EBut%20instead%2C%20you%20are%20working%20on%20a%20technology%20to%20only%20allow%20specific%20scenarios%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20would%20like%20what%20you%20described%3C%2FP%3E%3CP%3E%2B%20interactive%20elements%20(%22Who%20needs%20Forms%3F%22)%20like%20de%20CSR%20library%3A%20%3CA%20href%3D%22https%3A%2F%2Ficsr.github.io%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Ficsr.github.io%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20would%20like%20to%20continue%20working%20with%20the%20CSR%20editor%20Andrei%20Markeev%20developed%3A%20(the%20best%20thing%20since%20sliced%20bread)%3CBR%20%2F%3ECisar%20editor%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fandrei-markeev%2Fcisar%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fandrei-markeev%2Fcisar%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-39104%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20field%20rendering%20in%20modern%20list%20views%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-39104%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%3EThe%20modern%20version%20of%20the%20classic%20JSLink%26nbsp%3Bis%20definatelly%20important%20feature%26nbsp%3Bfor%20my%20cusomers%20to%20use%20modern%20lists%20and%20libraries.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EAn%20example%26nbsp%3Bscenario%20for%20JSLink%20today%3A%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20599px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F9852i028500388C0AB541%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22v%C3%A4ljastatudarved.png%22%20title%3D%22v%C3%A4ljastatudarved.png%22%20%2F%3E%3C%2FSPAN%3EClient%20has%20a%20list%20with%20project%20data%20and%20there's%20a%20column%20for%20the%20budget%20(maksumus).%20Project%20budget%20will%20be%20filled%20partially%20every%20month.%20With%20JSLink%20there%20is%20a%20link%20and%20a%20table%20to%20insert%20and%20display%20monthly%20payments.%20Total%20amount%20of%20monthly%20payments%20are%20calculated%20to%20Total%20field%20(Arveldatud%20summa).%3CBR%20%2F%3E%3CBR%20%2F%3EI%20know%2C%20its%20quite%20trivial%2C%20but%20similar%20scenarios%20are%20very%20common%20where%20I%20need%20to%20display%20data%20from%20another%20list%20in%20dispform.aspx%20or%20editform.aspx.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20hope%20my%20example%20will%20help%20to%20develop%26nbsp%3B%3CSPAN%3Emodern%20version%20of%20the%20classic%20Field.JSLink.%3CBR%20%2F%3E%3CBR%20%2F%3EGood%20luck!%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Microsoft

Hi SharePoint Developers,

 

We're working hard on making modern lists and libraries more extensible.  One feature that we're working on right now is a SharePoint Framework component that allows you to customize the rendering of fields inside modern list views.  In other words, this is a modern version of the classic Field.JSLink extensibility point.  We want to work with you guys on fleshing this out and enabling real scenarios that are currently blocking modern adoption. 

 

We'd like to gather more real-world examples of how people are customizing fields inside list views today.  Please help us out!  To get things started, below are a few field customization patterns that we're aware of and are considering how we can make them work with this new framework component.   We want to hear from you examples of scenarios that fit one of these patterns as well as scenarios you've encountered that are totally different.

 

Conditional formatting.  This is applying a different style to a field depending on its value.

Example:  I have a number field in a custom list called "KPI."  I want values between 0-20 in this field to be shown in the list view as red; 21-40 as yellow; 40+ as green. 

 

Supplementing the output of a field with more information.  This is displaying additional data inside a field alongside the data that's displayed by default.

Example:  I have a person/group field that stores contact information.  I want to display the name of the person's division next to their name.

 

Inserting links to actions.  This is placing links to actions on a list item within that list item's row.  Think of this as like a URL-based customaction, but the action is invoked by clicking the action's URL in the view instead of selecting that item and clicking a button.  We've heard that sometimes it's easier to train people to click a link in a row than it is to train them to select the item and find the right button in our menus.

Example:  I have a field in a document library called "Kick off Approval Workflow."  Client side code constructs a URL that kicks off an approval workflow (in SharePoint or in another system) for the item in question and places that URL inside that column.

 

40 Replies

Hi Lincoln, any update on the ability to format list items? Thanks for your hard work here!