I have two VS Code solutions, each one implementing (among other things), a different SPFx Application Customiser - both render content in the top placeholder. Solution 1 has Extension 1, and Solution 2 has Extension 2.

Upon deployment of the two solutions, both extensions render correctly, but the one on top of the other. Obviously, due to the fact that the loading takes place asynchronously, upon refresh, one time the Extension 1 appears on top of Extension 2 (in the top placeholder), the next time, the other way around.

The question is the following: Is there a way to control the relative placement of the content of the extensions? For example, in the "private _renderPlaceHolders()", check if there is another element in DOM and use jQuery to select relative placement - the target outcome is to have the extensions next to each other, with extension 1 always on the left.

Obviously, the easy way out is to merge both extensions into one and have full control, but I am trying to avoid this approach, because the solutions should be separated


You should be able to control order by defining sequence attribute on the <CustomAction> element. Doc

  • Thanks for the hint. It solves the load sequence problem. Now, regarding the rendering of both extensions (because, simply adding a sequence number, will result in "overwriting" but with the correct sequence), some more work is required. I solved the problem by adding a child <div> child to both extensions with a different ID, and placing the content there. This way, both render, without replacement: Jan 11 at 15:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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