Site Object

Creating and configuring Sites

Sites allow you to create a custom, well tailored experience for your users that provides them with quick access to the pages, tasks, and information that they need in a professional and polished way.

This article provides you with detailed information on how to create and configure a site object. To learn more about how to use sites, see Using Sites. To learn more about how to create functional and beautiful sites, see our Sites Branding design guidance.

screenshot of the sites page

Create a site

You can create a new site object in Appian Designer. Then, simply open the site object to configure it.

  1. In Appian Designer, open the application that you want the site to be in.
  2. From the New menu, click Site.
  3. For Name, enter a name.
  4. For Description, optionally enter a description.
  5. For Web Address Identifier, optionally add a web address identifier.
  6. Click Create to create and open the site to configure it.

Configure site properties

The Properties section allows designers to modify the primary site configurations that determine how users experience the site.

screenshot of the properties section of the site object

Properties

Field Description
Name The name is displayed to users in the browser title bar.
Show site name on navigation bar Option to show the site name on the navigation bar.
Description An optional description that is displayed to designers only.
Web Address The section of the site's URL that identifies it. The web address id appears in the URL and in log files.
Show Tempo link in Navigation Menu Option to show or hide the Tempo link in the navigation menu. Designers can select to always show it, never show it, or for one or more selected groups.
Show Record News Option to show or hide the news view on records. When enabled, all records displayed in the site will include the news view. In addition, the latest news will be displayed on the summary view when viewing user records.
Show Task List (Mobile only) Option to show a default task list in the Appian for Mobile Devices application.
  • When enabled, a list of all tasks assigned to the user is presented from the slide out menu in the Appian for Mobile Devices application. Mobile users can access any offline-enabled tasks from this list, even when they are not connected to the Internet.
  • Designers can select to always show the task list, never show it, or show it only for select groups.

Add pages

The pages section allows designers to add, remove, modify, or re-order the pages that are displayed in a site. Designers can configure up to 5 pages per site.

Each page within a site can be configured with an action, an interface, a report (task report Tempo report, or a record type.

To add and configure a site page:

  1. In the Pages grid, click Add Page.
  2. Complete the Add Page dialog and click OK

images/SiteAddPageModal.png

The following are the options available when adding or modifying a page.

Pages

Field Description More Information
Title The page title displayed to users in the navigation bar.
  • This is a required parameter.
  • You can configure the value as a static string or as an expression.
Web Address The section of the URL that identifies the page. It appears in the URL and in log files for network devices and servers. The value must be unique across pages within the same site.
Width Determines the width of the content area for the page. The width options are Narrow, Medium, Wide, and Full. Default is Wide. -
Icon The icon displayed to users in the navigation bar. -
Type Indicates whether the page will contain an interface, action, report, or record type. Reports can be task or Tempo reports.
Content The design object used for the page content.
  • Actions must have a start form to be used in a site page.
  • Related actions based on quick tasks are not supported in site records.
Visibility Which users and groups can view the page. When conditionally shown, the page is only visible when the expression evaluates to true. -

Configure site branding

The branding section allows designers to customize the look and feel of a site. These configurations can be set as static or dynamic values.

Use the branding section of the site to configure the following:

  • Site logo.
  • Colors.
  • Page icons.
  • Navigation bar style.
  • Input and button shape.

Check out the Branding Preview to get a better idea of what your site configurations and branding will look like.

For further information on configuring your site branding, see our site branding design guidance.

screenshot of the branding section of the sites page

The following three tables explain the branding configuration options in the Logos, Border Shapes, and Styles subsections.

Logos

Field Description More Information Default
Logo Image The logo appears in the navigation bar of the site. The placement of the logo depends on the navigation bar style:
  • Helium style: top right corner of the navigation bar.
  • Mercury style: top left corner of the navigation bar.
File requirements:
  • JPG, PNG, BMP, JPEG, or GIF with transparent background.
  • Be less than 100 KB.
Appian logo.
Logo Alternative Text The alt text should describe the logo and any text in it and will be announced by screen readers for visually impaired users. The alternative text can be set by a logo, web address, or expression. To use either a document or web address, select Static. Logo
Favicon Image The favicon (or "favorite icon") is the icon that appears in the browser tab or URL bar. File requirements:
  • ICO file.
  • Size 16x16 or 32x32.
  • Be less than 100 KB.
Appian "a" icon.
Configuring logo images

Each of the image fields have four configuration options for you to choose from:

  • Default: Select this to use the Appian logo.
  • Document: Select this to use an image within an Appian document folder or knowledge center.
  • Web Address: Select this to use a static image hosted on a web server or a content delivery network.
  • Expression: Select this to dynamically display an image defined by an expression. The expression must point to a document, output a document ID (integer), or output a text value (web address).
    • Note that if an expression's output is invalid the field will show the default value.

Border shapes

Field Description Shapes Default
Input Shape The shape applied to all input fields, selection fields, and picker components on all pages in a site. There are two options for input shape: squared and semi-rounded. Squared
Button Shape The shape applied to all buttons on all pages in a site. This includes all buttons for:
  • record view tabs
  • record actions
There are three options for button shape: squared, semi-rounded, and rounded. Squared

Styles

Field Description Default More Info
Navigation Bar Style The style of the site's navigation bar determines if icons are displayed with page titles in tabs, which side the logo is on, and the selected highlight color's style. There are two styles: Helium and Mercury.
  • The Helium style displays the logo on the right and icons in the page tabs.
  • The Mercury style displays the logo on the left and no icons in the page tabs. If a site has only one page, this style won't display page tabs.
  • Helium The navigation bar style only applies to desktop and mobile browsers. It won't appear in the Appian for Mobile Devices application.
    Navigation Bar Background Color
  • On web, this is the background color of the navigation bar.
  • On iOS, this is the color of the app header, tab bar and status bar.
  • On Android, this is the color of the app header bar and navigation bar.
  • #46708c -
    Selected Highlight Color The color of the selected tab or selected tab's underline in web and iOS. #083d5c -
    Accent Color Affects the color of many elements in all interfaces, such as buttons, links, active field border colors, milestone bars, and section titles. #1d659c Avoid grayscale colors (black, white, and gray) that are similar to colors used for interface elements. Avoid green/red colors that are used to indicate positive/negative values.
    Loading Bar Color The color of the bar at the top of the page that indicates when the system is processing. The accent color. Select a loading bar color with sufficient contrast against the navigation bar color to ensure users notice it.
    Configuring colors

    Each of the four color fields have three color configuration options for you to choose from:

    • Default: The default color depends on your field.
    • Hex Code: Select this option to define a hex code or choose a color using the color picker.
    • Expression: Select this option to dynamically set a color defined by an expression.
      • Note that if an expression's output is an invalid hex code the field will show the default color.

    If you select a predefined dark color scheme, the values for the navigation bar color, selected highlight color, accent color, and loading bar color are all provided for you.

    For more information on sites color schemes and color configurations, see our sites color schemes design guidance.

    Design guidance

    As you edit your site you may encounter design guidance. Appian design guidance reinforces best practice design patterns that should be implemented in your objects. Guidance is calculated while editing expressions within the site or when a precedent of the site is updated.

    When a recommendation or warning is triggered you'll see an indicator icon in the header (A) and next to the corresponding line in the expression editor (B).

    Click on the icon in the header to learn more about the suggested guidance (C) and how it can be addressed.

    If a recommendation is not applicable to your use case, you can Dismiss (D) that individual recommendation for that site. Learn more about recommendation dismissal. Warnings cannot be dismissed and should always be addressed to avoid complications when the logic in the object is executed.

    Site design guidance is also visible outside of the object on the Health Dashboard.

    See design guidance for the full list of possible guidance.

    Save and review

    To save and test your site:

    1. In the header bar, click Save Changes.
    2. In the properties section under Web Address, click the site URL to test the site.

    Design considerations

    This section provides you with guidance and tips to keep in mind while you're creating and configuring your site.

    Designing sites with users in mind

    • Designers should identify some guiding principals to how they will build sites. Will they be based on functional areas of the business? Will they be based on employee roles? Will they use a custom navigation experience?
    • When configuring a site page for web users, consider updating the page width to match the content.
      • For example, actions may have only a few fields and benefit from a narrow page width to avoid having the form look stretched.
      • Another example is a dense interface or report that can benefit from a wide page width or, if users have extra wide monitors, a full page width.
    • Safe links and news entry links will take the user out of the site, so consider this when designing sites that include them.

    Interfaces as sites pages

    • Use interfaces as sites pages to create dynamic dashboards, landing pages, and custom navigation experiences for your users. For design examples and inspiration, check out our complete list of drag and drop patterns to help you craft an efficient and engaging user experience.
    • Appian for Mobile devices users must update their application in order to see any sites page that has an interface as its page type.
    • Do not use interfaces with rule inputs as sites pages. Instead, use local variables and queries to display data on your sites page.

    Reports as sites pages

    • Use a report to allow the information in a sites page to be quickly accessible from the Reports tab in Tempo.
    • If the information in your sites page doesn't need to be accessible from the Reports tab on Tempo, use an interface for your sites page.
    • Reports cannot reference interfaces that use rule inputs. Instead, use local variables and queries to call and display data in the report's interface.

    Records and actions as sites pages

    Configuring sites to show record news can help improve the collaboration around records. Users can collaborate on existing record news entries in sites, but not create new entries. However, records can be designed to include related actions that can generate new record entries via process.

    Sites typefaces

    You can configure a custom typeface for sites from the Aministration Console. Typefaces are universally applied to all sites on the environment.

    Using predefined dark color schemes

    • The predefined dark color schemes for sites include predefined colors for the navigation bar and selected highlight color.
    • When you select one of the predefined dark color schemes for your site, make sure that all of your site pages are using the same color scheme. To do this:
      • In the interface for your site page, use a header content layouts with the backgroundColor parameter set to the same color scheme used for your site: Charcoal, Navy, Plum.
      • Then, put the page's contents into Card Layouts with the style parameter of each Card Layout set to the same color scheme used for your site.
    • Do not use dark color scheme pages and non-dark color scheme pages together in a site. If all pages in your site don't work well with the predefined dark color schemes, you can create your own custom color scheme for your site and interfaces.
    • Dark color schemes shouldn't be applied to pages used on Tempo or across multiple sites with different color schemes. Dark color schemes also do not work with the News and Related Actions tabs on records, record lists, and record related actions. If your site requires any of these, we recommend using the default white background across all site pages.

    Using input rounding

    Input rounding cannot be applied to the following UI elements:

    • Layouts
    • Display fields
    • Actions
    • Grids
    • Charts
    • Browsers
    • Record banners

    Site security and logging

    The security and monitoring of your site is important. Configure site security to control who can see and edit your site. Monitor your site by checking out site usage and metrics in your environment's logs.

    A user must have at least Viewer permissions to a site to access it. In addition, a user must have visibility to site pages and at least Viewer permissions to each interface, report, record type, or process model configured as a site page's content.

    The security role map of a site controls which users can see or modify the site and its properties. By default, only the site creator and system administrators have access to the site. See Editing Object Security to modify a site's security.

    The following table outlines the actions that can be completed for each permission level in a site's security role map:

    Actions Administrator Editor Viewer
    View the site Yes Yes Yes
    View the definition Yes Yes Yes
    View the security Yes Yes Yes
    Update the definition Yes Yes No
    Update the security Yes No No
    Delete the site Yes No No

    Logging

    Site usage is logged in <APPIAN_HOME>/logs/audit/sites_usage.csv. See Sites Usage Audit for details.

    Sites metrics are logged in <APPIAN_HOME>/logs/data-metrics/sites.csv. See Sites Metrics Log for details.

    Open in Github Built: Mon, Nov 15, 2021 (03:03:53 PM)

    On This Page

    FEEDBACK