Page Blocks: How to Build Solutions with Page Blocks

This section describes how to build solutions in the Portal Studio that leverage the functionality of Page Blocks.

In the Portal Studio of LumisXP, there is a very efficient way to create page blocks. When viewing a page with a layout file in the Portal Studio, you can select Mark HTML. In this mode, by default you can mark page holders, but it is possible to select the option Mark Page Block. In this mode, when you move your mouse over the page, it highlights the HTML blocks (div/nav/span/article/section etc.) that are not inside a Page Holder or Page Block. Select the HTML block that you want to separate into a page block. By clicking on the HTML block, the portal opens a light-box with the name and HTML of the page block. By selecting OK, the portal will automatically do the following:

1. Create a new layout file in the original page's theme. This layout file will have the HTML of the HTML block selected above. (Note: the theme/module must be editable for this to work.)
2. Create a page block in the same channel as the original page referencing the layout file created in (1).
3. Migrate the interfaces and page holders from the original page that are within the selected HTML block to the page block created in (2).
4. Modify the original layout file of the page by removing the selected HTML block and replacing it with a new page holder in a dummy page tag.
5. If it does not exist, create a service instance of the Page Block Viewer in the channel of the original page.
6. Create and insert a new Page Block Viewer interface from the service instance created in item (5) into the page holder created in item (4).
7. Configure the Page Block Viewer to reference the Page Block created in (2).

Now if you want to reference an already created page block in the light-box, choose the option "Reference existing page block". Then you can choose an existing page block. In this case, upon selecting OK, the portal will automatically do the following:

1. Delete the interface instances from the original page that are within the marked HTML block.
2. Modify the original layout file of the page by removing the selected HTML block and replacing it with a new page holder in a dummy page tag.
3. If it does not exist, create a service instance of the "Page Block Viewer" in the channel of the original page.
4. Create and insert a new Page Block Viewer interface from the service instance created in item (3) into the page holder created in item (3).
5. Configure the Page Block Viewer to reference the selected Page Block.