View in a Block

Summary

Put a View (Events, Press Releases, Blogs, Documents) into a block on a Landing Page or Site Page.

Audience

Site Managers and Site Admins. Publishers can edit existing blocks.

Overview

We create a view in a block when we want to provide a smaller subset of information on our pages to highlight, such as upcoming events, recent blogs, new press releases that already exists in page form.  This example shows how to add a calendar view in a block on a landing page. The process is the same when adding other types of views in a block.

Scenario:  I want to display a small subset of events (the 5 most recent five) on my landing page. This will provide my users with a quick snapshot of things to come.

Perquisites to complete task: You have to be a site manager or site admin to access views configurations.

How To

1. Navigate to the page that contains the information you need to put in a block. In this scenario, we will click News from the main navigation, then click Event Calendar

• Tip: You can determine if this page was created using Views by hovering your mouse over any filter drop-down or button. On the right side of the page a gear widget appears along with dotted lines around parts of the page. (see Figure A)

2. Click the views widget to display options, then click Edit View.

You should now be viewing a Displays view  page.

Create a block display

3. Next, click the + Add button to display options, then choose Blocks.

 

You should now see a new block created with a highlight line under it signifying it is page you will be editing.  In this example it is Block 2.

Updating block to reflect new name

We now have to update three areas of the display to reflect the new block:

Display name – this is the title that appears on the top line under the Displays heading.

Title – Under the title header

Block name – Located under Block settings.

4. First, on the left side of the page, click the Block 2 link next to Display name field and change name from Block 2 to (Something) Upcoming Events e.g., OSHR Upcoming Events), then click the Apply button. You should now see the block name change on the Display menu to OSHR Upcoming Events.

Note: You can change the title to anything you want.

 

5. Next, on the left side of the page, click the blue text link, Upcoming Events located under Title heading and change it to the same as your Display name, in this case OSHR Upcoming Events.

6. Under the For heading at the top, click the drop-down list and select This block (override).  After making all of the changes, click the Apply (this display button).
Note: This next step is extremely important. If you omit this step, your changes will cascade to all the other views on this Display View.

7. In the middle of the page, under Block settings, click the Block name field None. Change the name to something you can remember because this is the name that will appear in the block list. A typical block naming convention is Division initials – title of block (i.e. DMA Upcoming Events).

 

Add code to display header on the block

8. Next, on the right side of the page, choose Advanced. Scroll down until you see the Other heading.  We will be changing the values for two properties under Other:  Machine Name and CSS class.  Click the blue text for Machine Name:

9. In the Machine Name text box type  the word quick_links (include the underscore “_”), then click the Apply button.

10. Now click the blue text for the CSS Heading.  Look at the “For” dropdown field.  Make sure you choose “This block (override)” so the changes affect only the block that we’re creating. 

11. In the text field, replace the text with quick-links (this entry uses a dash “-“), then click the Apply (this display) button.

The next several steps will create a header (or title) that appears with your new block, on the page.

12. In the middle of the view display, under Header, click the Add button. The “Add header” window displays.

As with previous steps, you will see a For heading and the dropdown list below it. Click the arrow to display the options and select This Block (override).
Note: The blue button should change from Apply (all Displays) to Apply (this display)

Check Global: Text area, then click the Apply (this display) button. A Configure Header: Global: Text Area window appears.

13. In the text area, type <h3 class=”section-title”>Add your own title here</h3> and then click the Apply (this display) button. (Leave the “label” field blank.)
Note: The highlighted portion of HTML markup is the most important and must be typed exactly as it appears in the image below.  Copy the markup and paste into the text area of the Configure Header window to make sure there are no errors. Then just change the text to the desired Heading title for the block.

Click the Apply (this display) button.  Now we will change the number of items we will display

Change number of items to display in your block

Go to the middle of the view display page and locate the Pager header (Fig A). Next to the User pager field, click the Full link.
Note: This could say something else, click regardless to display another window to configure. (Fig B)                              

14. At the For heading, select This block (override), click the Display a specific numbers of items radio button, then click Apply (this display) button. A pager options window appears. (figure C) below.
 

15. On the Pager Options window, ensure the For heading still reads (This block (override).

16. In the Items to display text field, type in a number of events you want to display, then click the Apply (this display) button.  A good number is no more than five.

17. Click the Apply (this display) button to save your changes

Customizing your block to display specific information

Next we will customize our block to display information specific to your particular needs, to display on your landing page. You will make changes to the fields and set your filters to display information specific for your agency.

18. Let’s decide on what we want to display. Usually a view in block you may want to limit the amount of information to display.  Without making any changes, scroll down to the bottom of the page to see an auto preview of a small subsection of what you will view on your block. For views in a block, we would want only to display the title and the date in most cases.

In the field section, we will hide all of the information we do not want to display on our block. For this example, we will use the Body field as an example. Click the Body link and it will display the Configure field: Content:Body window.

19. At the top, ensure This block (override) is selected, then click the checkbox next Exclude from display, then click the Apply (this display) button. (Figure B)

20. Scroll down to the bottom of the page and all the body content should no longer be present. Continue with the remaining fields until the block preview at the bottom contains the information you desire. Now we will specify which information you display in your block and then we are finished.

21. On the left side of the page, go to the header titled Filter Criteria. We plan to accomplish two things:

a) Change all fields that have (Exposed next to them) by clicking the link.

b) Specify what Event Term or Agency/Department you want to display.

22. Ensure the This block (override) is selected under the For heading.

23. Click the link Content: When -start date (exposed Popup Day) and a window will appear.

24. Uncheck the Expose this filter to visitors, to allow them to change it checkbox.

25. Since we usually want to display a range of dates, we will make the necessary changes.  Under the Operator heading, select Is between. (below) You will see fields for a start and end date.

26. Under the Start date and End date headings, click the drop-down arrow and select Enter a relative date. (below)

27. Under the Relative start date heading text box, type the word now. Under the Relative end date text box type +30 days.  This displays all content that has a start date of today and will include information 30 days in the future. (Figure C)

28. Click the Apply (this display) button.

29. Click the Agency Department link. A window appears

30. Uncheck the Expose this filter to visitors, to allow them to change it checkbox.

31. Under the Operator heading, ensure Is one of is selected, select which Agency/Department/Division you want to display, then click Apply (this display) button.
Note: If you want to display multiple Agency/Division, choose the Is all of radio button, (hold your CTRL key on your keyboard on a PC) and select the agencies of choice.

 
 

32. Follow the same procedures for all of the other fields ensuring under the For heading This block (display) option is selected.

33. Scroll down to the bottom of the page to see your results.  If there are no results, make the necessary changes (most like with the date field).

34. We now will remove the Results summary from the block located in the middle of the view page under Header heading.
Note: This is the field that displays the title for example, “3 upcoming events” at the top of the block or page. Click the Global: Result Summary link. A window appears.

35. Click the Remove button to remove the Global: Result Summary field from the view display.

36. After you have made all of your changes, press the Save button located on the top right portion of the view to save your changes.

37. Follow your normal process for adding your block to your landing page or page of choice. In a landing page, the new block will be listed in any “insert block” dialog box. However, be aware that it will not display if you go to Content > Block.