Community Setup

Community Setup

The following steps through actions that should be taken when initially setting up a community in this theme.

• Community Setup
  • Community Administration Settings
  • Navigation Menu Setup
  • Change Theme Layout and Settings
  • Digital Analytics Program (DAP)
    • Site Completely Public
    • Some Authenticated Parts
  • Miscellaneous Meta Tags

Community Administration Settings

• From Workspaces, navigate to Administration
  • Login & Registration
    • Update Logo to use Agency-specific logo
    • Update Footer text. Note, US Government agencies do not hold copyright, see Government Works. Entering © My Agency is improper. Instead, just enter the agency name.
    • Set Logout Page URL
    • Save
  • Update other settings as needed.

Navigation Menu Setup

This theme relies on five navigation menus:

• Main Navigation
• Header Secondary Nav Menu (Optional)
  • Lives just below Search
  • Limit this nav to three or fewer entries
• Footer Main Nav Menu
• Identifier Nav Menu
  • Many agencies require standard links on every website such as Privacy Policy, Accessibility, SORN, etc.
• Social Media Nav
  • Used to display icons with links for various social media sites. Icons are powered by FontAwesome v5.x

Change Theme Layout and Settings

Salesforce Guidance on Theme Layouts

• Settings > Theme > Configure
• Change Theme Layout Component for the Default and Login Theme Layouts to USWDS Theme Layout. Accept alert and click OK.
  • Add Theme Images
    • Navigate to Theme (paint brush)
    • Update Images
      • Upload your organization logo under Company Logo. Update Login Page Background Image if desired.
        • A logo with transparent background is best as the header and footer are different colors.
    • Update Theme Settings
      • Work down the list of theme settings. As you tab through, the underlying page will update after each field.
      • If you created a community specific URL ...force.com/blah, update the Path to Home Page section to include beginning of URI path
      • Enter navigation menu names for each Nav Menu Name section
      • If you plan to override a particular section, toggle the section on to reveal an Aura.Component[] drop zone
    • Update Theme Colors
      • This repository ships with base theme colors but can be customized to specific needs. While not comprehensive, the following maps color settings to components in the community.
        • Action Color
          • Tab Component (specifically active tab)
          • Tile Menu
        • Overlay Text Color
          • User Profile Menu
        • Detail Text Color
          • Tabs (inactive)

Digital Analytics Program (DAP)

Public-facing government websites are required to utilize the Digital Analytics Program. In many cases, government websites have public and authenticated pages. The guidance from DAP is to only include the DAP code on pages that are unauthenticated.

Site Completely Public

Update "agency=GSA" to appropriate agency.

<script
  async=""
  type="text/javascript"
  src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=GSA&amp;pua=ua-33523145-2"
  id="_fed_an_ua_tag"
></script>

Some Authenticated Parts

You can conditionally include DAP on unauthenticaed pages by including the following javascript snippet in HEAD:

<script type="text/javascript">
  const _setupDAP = () => {
    var agency = "GSA";
    // authenticated sessions render a span with the "profileName" class.
    // The const elements will either be an empty array (unauth) or be an
    // array with length > 0 (auth)
    const elements = document.getElementsByClassName("profileName");
    // if found to be an auth session, don't render DAP
    // if unauth, dynamically render DAP
    if (elements.length == 0) {
      var s = document.createElement("script");
      var params = "?" + "agency=" + agency;
      s.type = "text/javascript";
      s.id = "_fed_an_ua_tag";
      s.async = true;
      s.src =
        "https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js" +
        params;
      var x = document.getElementsByTagName("script")[0];
      x.parentNode.insertBefore(s, x);
    }
  };

  document.onreadystatechange = function () {
    if (document.readyState === "complete") {
      setTimeout(_setupDAP, 1000);
    }
  };
</script>

Miscellaneous Meta Tags

On mobile devices, you can set the browser color by using the "theme-color" meta tag. For example, labs.gsa.gov uses GSA's Starmark Blue:

To configure, add the following to HEAD

<meta name="theme-color" content="#003C71" />