Sp-dev-docs: Extensions : manipulating DOM outside of placeholders

[SPParseError]

Category

• [X] Question
• [ ] Typo
• [ ] Bug
• [ ] Additional article idea

Question

Directly manipulating the DOM with something like this actually works :
document.getElementsByClassName("ms-Nav")[0]['style'].display = 'none';

I don't feel like it's a good practice at all: DOM will change regularly, there's no clear ID to target, and the user sees changes happening right on the screen.

Will those kinds of developments be supported in the future, or will there be only new placeholders? Actual placeholders are empty by default, will there be placeholders like LeftNavigation allowing us to replace site's navigation totally?

[patmill]

Good questions. As you mention, manipulating the DOM directly is a bad practice, and is "unsupported". It can't really be blocked in any way, but the DOM will change and will likely break solutions that depend on it. Placeholders are the way to go when you want to add additional HTML to areas that wouldn't be thought of as webparts. The first drop has a limited set of placeholders, but if you have some that you think make sense, then please suggest them.
In terms of replacing existing elements, I think of that as an extension type to be honest. Ie, I would rather have a "NavigationRenderer" extension type where you get the nav data and display it all yourself, then a generic application handler where you go and find a switch, flip it, connect to a placeholder, etc.
One thing we explicitly want to avoid is having a single div that is modified both by the app and a 3rd party developer. That won't work.

[ldemaris]

We'd love to hear your suggestions of how we can expand the current capabilities of ApplicationCustomizer:

• What placeholders should we include in our pages? Currently, we support the ApplicationCustomizer specifying a custom header. What are other regions on the page that should contain placeholders like this?
• What controls or areas on our pages should we support overriding with dedicated components? The navigation control is one idea - do you have any others?

[SPParseError]

Components override ability:

• Left navigation
• Top navigation (to create a common navigation between multiple sites)
• Search bar (for custom search)
• Site title zone: adding metadata about the site (we could do that in header new header but it would be more user-friendly if mixed with site title and site description)
• Left column: if we want to remove totally left navigation and go for a 100% layout

[andrewconnell]

Hey @SPParseError, check #625 & the linked user voice request in that issue... consolidate?

[SPParseError]

Hey @andrewconnell, I can post a screenshot of my requested placeholders to your issue and close this one to consolidate. Go for that?

Just voted on the user voice request.

[andrewconnell]

Works for me! Make sure you list the ones you want in the comments on the User Voice as well.

IMHO, better visibility with engineering if they have one place where all the requests are coming from on one feature. Some might get in, some might not, but the consolidated view makes them get equal visibility. Just my $0.02.

[NavaneethaDev]

@andrewconnell
Sorry to open this again :)
Could you please provide the placeholder for mega menu? So that we could insert our own custom multilingual menu which we read from term store. Currently i could see only Top and Bottom placeholders are available.
Is there any other way we can achieve this functionality?
What I tried is to replace the contents of (".ms-horizontalNav") into my own UL and LI menu. But it didn't work due to DOM manipulation. Its fluctuates the navigation and sometimes it wont even display for end users. Thanks for inputs.

[andrewconnell]

Feature request... those go on uservoice: https://aka.ms/sp-dev-uservoice

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues