SPFx Extension: Dependency on css class names

%3CLINGO-SUB%20id%3D%22lingo-sub-134152%22%20slang%3D%22en-US%22%3ESPFx%20Extension%3A%20Dependency%20on%20css%20class%20names%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-134152%22%20slang%3D%22en-US%22%3E%3CP%20style%3D%22margin%3A%200in%3B%20font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3EHi%3C%2FP%3E%0A%3CP%20style%3D%22margin%3A%200in%3B%20font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3EI've%20created%20a%20SharePoint%20Framework%20Extension%20that%20does%20the%20following%3A%3C%2FP%3E%0A%3COL%3E%0A%3CLI%3E%3CSPAN%20style%3D%22font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%20font-weight%3A%20normal%3B%20font-style%3A%20normal%3B%22%3EAdds%20a%20print%20stylesheet%20(%40media%20print)%3C%2FSPAN%3E%3CUL%3E%0A%3CLI%3E%3CSPAN%20style%3D%22font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%20font-weight%3A%20normal%3B%20font-style%3A%20normal%3B%22%3EHides%20elements.%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3E%3CSPAN%20style%3D%22font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3EApplies%20a%20watermark.%3CBR%20%2F%3E%3C%2FSPAN%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3C%2FLI%3E%0A%3CLI%3E%3CSPAN%20style%3D%22font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3EAdds%20a%20custom%20footer%20to%20the%20bottom%20of%20the%20document%20(JavaScript%20injection)%2C%20not%20the%20bottom%20of%20the%20page%20(application%20customizer).%3C%2FSPAN%3E%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%20style%3D%22margin%3A%200in%3B%20font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3EBoth%20the%20above%20are%20dependent%20on%20CSS%20classes%20within%20the%20rendered%20page%3A%3C%2FP%3E%0A%3CP%20style%3D%22margin%3A%200in%3B%20font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20style%3D%22margin%3A%200in%3B%20font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3EHidden%20when%20printed%3A%3C%2FP%3E%0A%3CPRE%3Eroot_db29caec%2C%20nav_995e56d3%2C%20%23SuiteNavPlaceHolder%2C%20commentsWrapper_3f0ee14c%2C%20banner_995e56d3%2C%20feedback_674c19bf%3C%2FPRE%3E%0A%3CP%20style%3D%22margin%3A%200in%3B%20font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20style%3D%22margin%3A%200in%3B%20font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3EFooter%20appended%20to%3A%3C%2FP%3E%0A%3CPRE%3ECanvasZone--read%3C%2FPRE%3E%0A%3CP%20style%3D%22margin%3A%200in%3B%20font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20style%3D%22margin%3A%200in%3B%20font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3EShould%20I%20be%20concerned%20about%20these%20class%20names%20changing%3F%20If%20yes%2C%20what%20are%20the%20alternatives%3F%3C%2FP%3E%0A%3CP%20style%3D%22margin%3A%200in%3B%20font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20style%3D%22margin%3A%200in%3B%20font-family%3A%20Calibri%3B%20font-size%3A%2011.0pt%3B%22%3EThanks.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-134152%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Framework%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-134164%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20Extension%3A%20Dependency%20on%20css%20class%20names%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-134164%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F9907%22%20target%3D%22_blank%22%3E%40Joel%20Rodrigues%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI'm%20familiar%20with%20the%20example%2C%20in%20fact%2C%20that's%20the%20starting%20point%20for%20my%20extension.%20I've%20modelled%20the%20footer%20in%20both%20the%20application%20customizer%20(placeholder)%20way%20and%20the%20JavaScript%20injection%20way.%20I'm%20hoping%20my%20company%20will%20accept%20the%20application%20customizer%20way.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThat%20still%20leaves%20me%20with%20the%20print%20stylesheet%20task.%20As%20there%20is%20no%20inbuilt%20way%20to%20achieve%20this%2C%20the%20only%20solution%20I%20can%20currently%20think%20of%20is%20to%20reference%20the%20CSS%20classes.%20I%20don't%20like%20this%20solution%20as%20it%20is%20brittle.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-134162%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20Extension%3A%20Dependency%20on%20css%20class%20names%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-134162%22%20slang%3D%22en-US%22%3E%3CP%3EI%20would%20be%20very%20concerned%20personally%20as%20the%20code%20can%20break%20at%20any%20time%3C%2FP%3E%0A%3CP%3EI%20would%20follow%20the%20application%20customizer%26nbsp%3Bapproach%20as%20that%20is%20the%20only%20one%20that%26nbsp%3Bguaranties%20that%20your%20code%20will%20always%20have%20the%20required%20dependencies%20on%20the%20page.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fextensions%2Fget-started%2Fusing-page-placeholder-with-extensions%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EGetting%20started%20example%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

Hi

I've created a SharePoint Framework Extension that does the following:

  1. Adds a print stylesheet (@media print)
    • Hides elements.
    • Applies a watermark.
  2. Adds a custom footer to the bottom of the document (JavaScript injection), not the bottom of the page (application customizer).

Both the above are dependent on CSS classes within the rendered page:

 

Hidden when printed:

root_db29caec, nav_995e56d3, #SuiteNavPlaceHolder, commentsWrapper_3f0ee14c, banner_995e56d3, feedback_674c19bf

 

Footer appended to:

CanvasZone--read

 

Should I be concerned about these class names changing? If yes, what are the alternatives?

 

Thanks.

2 Replies
Highlighted

I would be very concerned personally as the code can break at any time

I would follow the application customizer approach as that is the only one that guaranties that your code will always have the required dependencies on the page.

 

Getting started example 

Highlighted

Hi @Joel Rodrigues

 

I'm familiar with the example, in fact, that's the starting point for my extension. I've modelled the footer in both the application customizer (placeholder) way and the JavaScript injection way. I'm hoping my company will accept the application customizer way.

 

That still leaves me with the print stylesheet task. As there is no inbuilt way to achieve this, the only solution I can currently think of is to reference the CSS classes. I don't like this solution as it is brittle.