0

Has anyone figured out how this company was able to achieve the auto expand the quick launch via spfx? https://www.tecconsult.at/products/sharepoint-auto-expand-left-navigation/

I can't seem to figure out how to simulate the onlick event via spfx. In the dom there's zero difference between Inventory (with sub items) and Documents (without)

enter image description here

BEFORE

Before Clicking

AFTER

After Clicking

2 Answers 2

0

This element has the onClick event for expanding the menu item:

<button type="button" class="ms-Button ms-Nav-link ms-Button--action ms-Button--command link-271" title="Directorate Structure" aria-describedby="id__46" data-is-focusable="true" tabindex="0">
...
</button>

It is placed inside the <div class="ms-Nav-compositeLink"> element of the menu list.

If the menu item is expandable it renders as <button>, not a link <a> element. So, you can somehow select and filter it from the DOM by the SPFX extension (placeholders from Application Customizer), I suppose. Example:

const menu = document.querySelector('.ms-Nav-navItems');
const button = menu.querySelectorAll('.ms-Nav-compositeLink button.ms-Nav-link');
button[0].click();
0

In case anyone wanders in, here's how you do it (@Dm s has it 95% with quick suedo code).

const menu = document.querySelector('.ms-Nav-navItems');
const button = menu.querySelectorAll('.ms-Nav-compositeLink > button.ms-Nav-chevronButton');
button[0].click();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.