Define Multiple Layouts in JSS - Code First

Question

We are implementing a website using JSS in Code First approach. There is a requirement to have two different layouts in the site,

1. Layout1 - for all the pre-login pages
2. Layout2 - for all post login pages

Just wondering on how we can create multiple layouts in code first approach. Is it possible to implement easily, may be with minimal code/customization.? If not I think I can use the single layout or follow the Single page application concept and tweak the display based on some parameters. for ex,

• if user authenticated show the components which I want to show in post login and hide pre-login specific components etc.
• if user is not authenticated hide the post-login components and show the pre-login specific components

Any help much appreciated, Thanks.

Answer 1

Use different placeholders when the allowed components are different. In the placeholder settings, you can set for a placeholders the allowed renderings.

There are basically two approaches.

1) use 2 different Layouts with different placeholders.

2) 1 Layout, with a placeholder where you can place only your page renderings. where the page rendering is just a normal rendering with less html but with 1 or more placeholders.

Then you have a rendering preLogin with placeholder prelogin and a rendering afterlogin with placeholder afterlogin. In the placeholders setting from prelogin and afterlogin you define the allowed components, renderings.

Of course you can have more placeholders like header and footer.