How to Use The Layout Manager - Part 1
New Post has been published on https://socialpress2.newonline.help/2021/01/28/how-to-use-the-layout-manager-part-1/
How to Use The Layout Manager - Part 1
Prerequisite – How to Create a WPF Page – http://www.vimeo.com/9373864
This video will explain what the layout manager is used for, the different parts of the layout manager, how to use bracketed URLs, what template inheritance is and how to use it.
It is divided into part 1 and 2.
You should first watch “How to Create a WPF Page” tutorial before this video to understand the basics of creating a page.
If you’ve already watched the “How to Create a WPF Page” tutorial, then you’ve already used the layout manager. The layout manager allows you to add modules to pages and control what the page looks like. It has a powerful template inheritance feature that allow you to create one template and reuse it to create many pages.
With template inheritance, you can place all the modules needed on tiers within the template and… optionally select data to go into the modules. Once you layout the template, it can be saved and reused many times. The template inheritance feature is often used for pages that look very similar, like article pages or encyclopedic entry pages. With template inheritance, you can even add a new module to the template and change the look of all the pages that are based on the template.
As was explained in the “How to Create a Page” tutorial, a page is made up of different tiers. You can edit tiers and add modules to it. You can then add content to the module.
In the first portion of this tutorial, we will recap the page creation process.
First, let’s create a page by selecting “Create –> New Page” from the top menu bar.
– Let’s call this page “Demo Page 1” and give it a URL.
– We will put in data for the required fields and then save it.
Once the page loads, we’re going to add three modules to this page. An Open HTML module, and two media carousels.
To add a module, you first need to create a tier.
– Select create tier.
– Now select the module, we will be adding an Open HTML module.
– Put some text in the Open HTML module. This will display HTML on the page directly.
– Let’s add a 2nd module to this tier, a Media Carousel
– Now save the options for both and click the X at the top right to save.
Whenever you editing modules, you can see what module is on the page by looking at the title section here.
When the page reloads, both modules will be on the page. Because the Media Carousel needs to be linked to data, it has not rendered yet. Let’s select a bundle and link it to the media carousel.
Now the media carousel has data. We can edit the tier options by select “Edit Tier –> Layout Tier”.
When creating or editing a tier, you can delete individual modules, add modules, or move modules up or down.
Note that each module has drifferent options. It’s beyond the scope of the tutorial to cover each module. Please see the Wiki or the nearest tech person if you have questions regarding how to use a particular modulel.
Click “Save Options” after making changes. Click the X on the top right to close the window and reload the page.
We will add another media carousel with data in a different tier.
– Select create tier
– Select the Media Carousel module. Save the options and click X on the top right.
– Again, we need to select data for this Media Carousel. Click the “Replace Media Content” button. And select a bundle.
This new page now has three modules on it. You can test how it will look without all the Layout Manager links by selecting “View –> Page Preview” from the top menu. A new tab will open with the page. The URL for this new tab is the final URL for the page.
Now, let’s say you would like to use this general layout for pages in the future. You can do this by converting this page into a template and using the layout manager’s inheritance features. To do that, select “Edit -> Page Properties”.
From this page you can edit all the parameters you set when the page was created. We’re going to edit the URL. To convert the page into a template to be inherited by other pages, first the URL needs to be a bracketed URL. For example:
From now on, any page that uses a URL which begins with /demo/[mytemplate]/ will have all the modules, properties and data of the template. If you change the template, the pages that use the template automatically get those changes.
A template is always a page, but not all pages are templates. Only pages that have bracketed URLs are templates.
Let’s create a page using this template. Open a new tab so we can keep our template page open.
– Select “Create –> New Page” from the top menu. Fill in all the required fields.
To use a template, we need to use the bracketed URL from the page we just created.
– Enter “/demo/[mytemplate1]/first_page_from_template/.
Notice the actual URL for the page does not use the brackets. The URL is /demo/first_page_from_template/
When the page is created, you will see it has all the modules we selected on the template before.
There’s the Open HTML module and the two Media Carousels.
Our new page can override the template if needed. To override, you select the tier to override and then either, “Blank out” the tier, “Copy the tier” or “Override the tier.”
“Blank out” does as the name says. Removes all modules, blanking out the tier and also disconnects it from the template tier preventing any inheritance. The red icon to the left mean it’s a blanked out tier.
“Copy tier” allows you to take all the modules that were in the template and copy them into this page. This disconnects the tier on the page from the tier on the template, meaning that future changes in the template for this tier will not be inherited by the tier on this page.
“Override” blanks out the tier but also allows you to add modules to the page. This also disconnects it from the parent template tier.
Let’s override the second tier with our own modules.
– Select “override tier” from the tier options.
– Click “add module” and select an Open HTML module.
Observe the color icon on the left side of the tier turned green. This means that modules in this tier belong to this page and are NOT inherited from the template. Notice the first tier is yellow. That means the modules in this tier are inherited from the template’s tier.
To go back to the inherited template tier, delete the tier.
Sometimes you don’t want to override the module itself, just the content in it. To override just the content, select “Replace Module Content”, and select different content. In our case, are selecting a different bundle.
Now we see the tier is still inheriting modules from the template, but now the content is what we selected just for this page and not what was inherited from the template.
To reset the data back to what is in the template.
– First, copy the tier. Remember, this copies everything from the template into the page.
– Then select Remove Module Content
– Then select “Delete Tier”
Now the tier is connected back to the template. You can tell because of the yellow icon here. And the data is also set back.
Let’s go back to our template and add a new module to observe how this new module is automatically inherited by our page.
Select “View –> Layout” on the template page to back into the Layout editor.
To add a module,
– Edit a tier by “Edit Tier –> Layout Tier”
– Select the Dynamic Lead module
– Save options and click the X at the top right.
The module is added to the template. We’re not going to add any data at the template level this time. We want the page to have to select the data.
Let’s go back to the page that inherited this template. Refresh the page.
The new module is here, but without any content. Select the content by clicking “Replace Module Content”. The Dynamic Lead Module requires a bundle prepared for it. Here we found one. Select it. Click the X at the top right.
When the page refreshes we will see our new content. It’s important to note that if we had many pages that used this template, by adding a module that has no content, we need to go in and select content for all the pages. So be careful with this option.
In this tutorial, we just learned how to:
– Create a template
– Create a page which uses a template
– Blank out a tier
– Copy a tier from a template
– Override a tier
– Assign content to a module inherited from a tier
Likes: 0
Viewed:
source
