Skip to main content
Version: 8.1

Docked Views

Inductive University

Docked Views in Perspective

Watch the video

Views can be anchored to an edge of a session. This configuration is called a docked view, as the view is "docked" to an edge in the session.

Docks are created in the Page Configuration interface.

Configuring a Docked View

Docked views can be added to a page configuration in the following way:

  1. Select the configuration you wish to add the dock to
  2. and then clicking the Add button on the desired edge. In this example, we'll add a north docked view by clicking at Add button at the top of the diagram.

  3. You'll see a popup tree showing all views in the project. At this point you'll select the view that will be placed in the docked. Select the desired view and click OK. You'll find your new dock has been added.

Editing an Existing Docked View

Once a view has been docked, it can be further customized via the Configure Docked View popup by left-clicking on the docked view's Edit icon on the docked view configuration.

Docked View Properties

Property NameDescription
ViewThe currently selected view. Changing this will change which view is mounted to this position.
DisplayThis property allows you to show or hide the docked view. See display.
Resizable?Determines whether the docked view may be resized or not.
Modal?Determines if the view should be modal, meaning users will not be able to directly interact with other views while the modal view is present. This property is only enabled when the Display property is set to onDemand.
ContentDetermines how the docked view interacts with other views on the page. See content.
AnchorAllows you to make a view always visible while scrolling. Only available on North docked view configurations.
  • fixed: The docked view will remain in a fixed position, relative to the page. Useful when a north-docked view should stay at the top of a page. Select this option if a docked view is acting as a header that should always be present.
  • scrollable: The docked view will not stay in a fixed position as the user scrolls down in the page. Select this option if the north dock should move along with the page as the user scroll down.
  • SizeDetermines the size, in pixels, of the view.

    • If the view is docked to the North or South edge, then size determines the height.
    • If the view is docked to the East or West edge, then size determines the width.
    Auto BreakpointControls the minimum page width for Auto docked views to be visible. When the session is smaller than this width, these views will be hidden and able to be displayed on demand. This property is enabled when the Display property is set to auto.
    Dock IDAn optional arbitrary string that can be used to reference a docked view through other parts of Perspective such as in an action or as a scripting call.
    HandleAllows you to show or hide a handle for users to expand/collapse the view.
  • Show: Show handle at all times.
  • Hide: Hide handle at all times.
  • AutoHide: Hide handle when page is not active.
  • Handle IconPath to an icon used to identify the view when the view is hidden.
    View ParametersAllows specific parameter values to be passed to the docked view when navigating to the page.
    RemoveDeletes the view from the page.

    Display

    OptionDescription
    visibleThe docked view is always expanded/displayed.
    onDemandThe docked view is collapsed, but allows the user to display the view by clicking on the docked view's handle.
    autoAutomatically shows or hides the docked view depending on how much space is available in the session: showing the view if the page is wider than the width specified in the auto-breakpoint setting. (Works in conjunction with the Auto Breakpoint property).

    Content

    OptionDescription
    pushOpening or closing the docked view causes the content in the center to resize: the center view will be 'pushed' out of the way.
    coverWhen opening the dock, it slides in front of the center view, obscuring part of the center view: the dock will 'cover' part of the center view.
    autoActs like the cover option when the viewport is smaller than the Auto Breakpoint value. Acts like the push option when the viewport is larger than the Auto Breakpoint value.