AEM Templates

Service Detail Page

The Service Detail template serves as a landing page for an individual service within an agency. This page can provide residents with information about a specific service such as how to apply, who is eligible, FAQs, and more.

 

Service Detail pages are located within the Services section of PA.gov, in each agency’s Services folder. On the live site, residents can filter services by agency, audience, service category, service type, or life event. Each agency owns their Service Detail pages for the services they provide.

 

Authors should use Agency Content Pages for any non-Services content.

Overview

Template name: Service Detail Page

Required components in template:

Authors who can edit: any in the correct agency folder (ex. DHS authors only in services/dhs folder)

Creating a Service Detail page

Option A: Copy/paste the Service Detail Best Practices guide, which doubles as a template.

Option B: Create a new page:

1. Select where in the sitemap the new page should be created. Click through the site hierarchy to determine the location. Service Detail pages are always created as part of the Services folder.

2. Once in the Services folder, click on your agency, then click Create.

Site hierarchy leading to the Services pages

3. Click “Create,” then select “Page” from the dropdown.

4. From the “Create Page” template options, select “Service Detail Page,” then “Next.”

5. The author may now choose Page Properties for the newly created page. View the Page Properties section on this page for more info.

6. Click “Create.” The page is now part of the site hierarchy.

7. Click “Open” to edit the page immediately. Click “Done” to return to the site hierarchy.

Editing the Service Detail Page

1. Find the page in the sitemap. Click through the site hierarchy to find the location. In the example below, the page to edit is called "Apply for the Medicaid Adult Autism Waiver." The page is in the CoPA PWP PA.gov site, in the English section, in the Services section, in the DHS Services folder. Select the checkbox.

Site hierarchy leading to the DHS Services section, with one of their Services pages checked off

2. Upon click, a menu appears at the top of the screen.

  1. Select "Properties" to edit Page Properties.
  2. Select “Edit" to edit the page.

3. The page opens in the editing mode, and components can be added accordingly.

4. Page edits will save automatically. Past page versions can only be referenced if a version was created. Read the Saving Page Versions guide for more info.

Service Detail page examples

Figure A: Service Detail page using two-column layout. Figure A: Service Detail page using two-column layout, with the Table of Contents on the left and one content column on the right.
Figure B: Service Detail page using three-column layout. Figure B: Service Detail page using three-column layout, with the Table of Contents on the left, and then Column Control breaking the right into one main content column and one secondary content column.
Figure C: “Related Services and Information” section on the bottom of the page. Figure C: “Related Services and Information” section on the bottom of the page.

Page Properties

Basic tab
  • Tags field: Add tags for the service. Tags are used to filter on the Service Directory. At minimum, there should be an agency tag (so residents can find the service under your agency's filter. At maximum, there should be 15 tags.

Other Tips

  • The Service Detail page uses a two-column layout on desktop. On tablet/mobile, it truncates to one column.
  • Use Column Control to add a third column to the page on desktop. This is helpful if there are elements that should appear alongside others, such as required documents, important dates, or reminders.
    • Teasers or Text components may be the best options for the third column, as it is narrower than the main column.
  • The last parsys on the page (above the Footer) is full width, and includes a smaller subset of components to drag and drop. This can be used by authors to build the "Related Services and Information" full width section as seen in the example below. It is optional for authors to use this parsys.
    • This section is recommended to provide agency branding to the page.