BannerRoster: Modify Listing and Detail Pages

The next step is to create the actual pages to display the contents of the member directories. I want to have a top level page that has photo links to each location, and then a page for each location that lists employees by department. Additionally I am going to make a display page to show a detail level view of a single employee.

The first page to create is the one that links to each location. Begin by creating a new page from the BannerOs dashboard; you can click content > add new page, or clicking the add new page icon on the content tab. The following table explains the fields I am updating on the ‘Add New Page’ screen

Clicking continue and save will create a new blank page. Before I add the content to that page, I want to create the two pages that it will link to. The process is exactly the same, except the values change a little bit.

Again, clicking continue and save will save your pages without content. Once all of the pages are there, it’s time to go back in and start adding content. From the BannerOs dashboard, click manage pages from the content tab or content drop down, then click on the ‘Employees’ page name to view the page and open it for editing.

Clicking the edit marker for the page content will open the WYSIWYG editor. This page is just to link to the two location pages, so there’s not a lot to do. If you’d like to use an image, select ‘Media’ from the ‘Insert Dynamic Content’ drop down menu and follow the prompts to select or upload an image. I am using a 200 x 200 placeholder image that I’ve already uploaded.

Right clicking on the images and choosing ‘Link’ will let you turn them into links to the other pages by entering the url you specified when creating them, and a title.

To improve the look of the page a little, you can center the contents by pressing the center button on the WYSIWYG editor toolbar. Additionally you can add some empty space between the images by right clicking on them and selecting ‘Image’ then putting in a number of pixels on the Horizontal or Vertical space fields on the advanced tab. Add any explanatory text you like, and save the page.

Because this page is the top level of the directory view being created, it’s a good idea to add it to the site navigation so your visitors can find it. From the BannerOs dashboard’s design menu, click ‘Site Navigation’, then ‘Manage Links’.

Under the ‘Navigation Structure’ box, there are buttons to add a link, dropdown, or divider. Click the Link button, and then set the name and select ‘/employees/’ in the link details box. If you want to adjust the position, drag the link element to the desired location in the Navigation Structure box and then click save.

You can view your site to confirm the changes and the link by selecting ‘view website’ from the power symbol drop down on the BannerOs dashboard. Click through to the employees page and test one of the image links. You should have a page containing your header and footer but nothing in the main content block.

Click the edit marker icon for the main content block to open the WYSIWYG editor to begin adding markers for the member directories.

To add listings for each department at the western location, I am going to type a header for the department, then click ‘Insert Dynamic Content’ and choose BannerRoster Directory. Then I select the directory that corresponds to the header and click ‘Insert’. I don’t need to worry about any filtering since that is already being done by the Dynamic Member Set, and the sorting doesn’t really matter for this example.

I repeat those steps until all directories are displayed on their respective pages. The last page to add content to is the ‘profile’ page that will display individual member details. This page is last because none of the links to it are set up yet, and making it work as intended requires some patience.

Open the page for editing by clicking the page name in the ‘Manage Pages’ screen, and then add markers for every member directory, especially the all inclusive ‘Employees’ directory. Headings are not necessary on this page, when it’s finished there will be a dynamic header based on the member being displayed.

Save the page, and then for each of the member directories besides the ‘Employees’ list, modify each by going to the Manage Directories icon on the ‘Directories’ tab of the BannerRoster dashboard and clicking the modify button. One trick to avoid missing any is to click the modify button for each with your middle mouse button before making any changes. New tabs will be opened for each that you can close after saving changes.

On each tab that’s opened, change the ‘Display Page’ to ‘Employee Profile’ then click verify and close the tab after you receive the success message.

Right now the profile page is going to look more than a little cluttered, but that is just temporary, just make sure that in the WYSIWYG editor you can tell which marker is for the ‘All Employees’ directory because all of the others will be eventually removed.