• Page Admin Mode
• Add Web Parts - Web parts are user interface panels that you can add to a folder/project page. Each type of web part provides some way for users to interact with your application and data. For example, the "Files" web part provides access to any files in your repository.
• Manage Web Parts - Set properties and permissions for a web part
• Web Part Inventory - Available web parts
• Use Tabs - Bring together related functionality on a single tab to create data dashboards
• Add Custom Menus - Provide quick pulldown access to commonly used tools and pages in your application.
• Web Parts: Permissions Required to View

Related Topics

• Projects and Folders - A project or folder provides the container for your application. You typically develop an application by adding web parts and other functionality to an empty folder or project.
• JavaScript API - Use the JavaScript API for more flexibility and functionality.
• Module-based apps - Modules let you build applications using JavaScript, Java, and more.

• Page Admin Mode
• Web Parts
• Frameless Web Parts
• Tabs

Page Admin Mode

Select > Page Admin Mode to enter it.

You will see an Exit Admin Mode button in the header bar when in this mode.

To exit this mode, click the button, or you can also select > Exit Admin Mode.

Web Parts

Add Web Parts

In page admin mode, you can add new web parts using the selectors at the bottom of the page. The main panel (wider) web parts can be added using the left hand selector. Narrow style web parts, such as table of contents, can be added using the selector on the right. Note that at narrow browser widths, the "narrow" web parts are displayed below (and as wide as) the main panel web parts.

Customize Web Parts

The (triangle) menu for a web part contains additional options in Page Admin Mode. Additional options:

• Permissions: Control what permissions are required for a user to see this web part.
• Move Up: Relocate the web part on the page.

• Move Down: Relocate the web part on the page.
• Remove From Page: Remove the web part; does not necessarily remove underlying content.
• Hide Frame: Show this web part without its frame.

Frameless Web Parts

The outline, header bar, and menu can be removed from a web part by selecting Hide Frame from the (triangle) menu. Shown below are three views of the same small "Projects" web part: in admin mode both with and without the frame, then frameless as a non-admin user would see it.

Notice that frameless web parts still show the web part title and pulldown menu in page admin mode, but that these are removed outside of admin mode.

Frameless web parts make it possible to take advantage of bootstrap UI features such as jumbotrons and carousels.

Tabs

When there is only one tab, it will not be shown in the header, since the user will always be "on" this tab.

When there are multiple tabs, they are displayed across the header bar with the current tab in a highlight color (may vary per color theme).

On narrower screens or browser windows, or when custom menus use more of the header bar, multiple tabs will be displayed on a pulldown menu from the current active tab. Click to navigate to another tab.

Tabs in Page Admin Mode

To see and edit tabs in any container, an administrator enters > Page Admin Mode.

To add a new tab, click the mini tab on the right. To edit a current tab, pulldown the (triangle) menu:

• Hide: Do not display this tab in non-admin mode. It will still be shown in page admin mode. Hidden tabs are shown in page admin mode with a icon.
• Delete: Delete this tab. Does not delete the underlying contents.
• Move: The caret menu indicates you can click to select from a sub menu
• Rename: Change the display name for the tab.

Related Topics

• Build User Interface
• Add Web Parts

There are two display regions for web parts, each offering a different set. The main, wider panel on the left, where you are reading this wiki, and a narrower right-hand column (on this page containing search, feedback, and a table of contents). Some web parts, like Search can be added in either place.

Add a Web Part

• Navigate to the location where you want the web part.
• Enter Page Admin Mode to enable the page editing tools.

• Scroll down to the bottom of the page.
• Choose the desired web part from the <Select Web Part> drop down box and click Add.

• Note: if both selectors are stacked on the right, make your browser slightly wider to show them on separate sides.
• The web part you selected will be added below existing web parts. Use the (triangle) menu to move it up the page, or make other customizations.

• Click Exit Admin Mode in the upper right to hide the editing tools and see how your page will look to users.

Anchor Tags for Web Parts

You can create a URL or link to a specific web part by referencing its "anchor". The anchor is the name of the web part. For example, this page in the File Management Tutorial example has several web parts:

https://www.labkey.org/home/Demos/File%20Management%20Tutorial/project-begin.view?

The following URL will navigate the user directly to the "Prelim Lab Results" query web part displayed at the bottom of the page. Notice that spaces in names are replaced with "%20" in the URL.

https://www.labkey.org/home/Demos/File%20Management%20Tutorial/project-begin.view?#Prelim%20Lab%20Results

Related Topics

• Web Part Inventory
• Manage Web Parts

• Web Part Triangle Menu
• Web Part Controls
• Page Admin Mode Options

Web Part Triangle Menu

Each web part has a (triangle) pulldown menu in the upper right.

An expanded set of options is available when the user is in page administrator mode. If the web part is frameless, the (triangle) menu is only available in page admin mode.

Web Part Controls

The particular control options available vary by type of web part, and visibility depends on the user's role and editing mode. For example, Wiki web parts have a set of options available to editors for quick access to wiki editing features:

When the user does not have any options for customizing a given web part, the menu is not shown.

Page Admin Mode Options

Administrators have additional menu options, including usually a Customize option for changing attributes of the web part itself, such as the name or in some cases selecting among small/medium/large display options.

To access more options for web parts, administrators select (Admin) > Page Admin Mode.

• Permissions: Configure web parts to be displayed only when the user has some required role or permission. For details see Web Parts: Permissions Required to View.
• Move Up/ Move Down: Adjust the location of the web part on the page.
• Remove From Page: This option removes the web part from the page, but not the underlying data or other content.
• Hide Frame: Hide the frame of the web part, including the title, header bar, and outline, when not in page admin mode. For details, see Frameless Web Parts

Related Topics

• Page Admin Mode
• Web Parts: Permissions Required to View
• Web Part Inventory

Left Side, Wide Web Parts

Right Side, Narrow Web Parts

Related Topics

• Web Part Configuration Properties
• Add Web Parts
• Web Part Inventory with "Specimens" module

• Tab Editing
• Add A Tab
• Default Display Tab
• Custom Tabbed Folders

Some folder types, such as study, come with specific tabs already defined. Click the tab to activate it and show the content.

With administrative permissions, you can also enter page admin mode to add and modify tabs to suit your needs.

Tab Editing

Tabs are created and edited using > Page Admin Mode. When enabled, each tab will have a triangle pulldown menu for editing, and there will also be a + mini tab for adding new tabs.

• Hide: Hide tabs from users who are not administrators. Administrators can still access the tab. In page admin mode, a hidden tab will show a icon. Hiding a tab does not delete or change any content. You could use this feature to develop a new dashboard before exposing it to your users.
• Move: Click to open a sub menu with "Left" and "Right" options.
• Rename: Change the display name of the tab.
• Delete: Tabs you have added will show this option and may be deleted. You cannot delete tabs built in to the folder type.

Add a Tab

• Enter > Page Admin Mode.
• Click the mini tab on the right.
• Provide a name and click OK.

Default Display Tab

As a general rule when multiple tabs are present, the leftmost tab is "active" and displayed in the foreground by default when a user first navigates to the folder. Exceptions to this rule are the "Overview" tab in a study folder and the single pre-configured tab created by default in most folder types, such as the "Start Page" in a collaboration folder. To override these behaviors:

• "Overview" - When present, the Overview tab is always displayed first, regardless of its position in the tab series. To override this default behavior, an administrator can hide the "Overview" tab and place the intended default in the leftmost position.
• "Start Page"/"Assay Dashboard" - Similar behavior is followed for this pre-configured tab that is created with each new folder, for example, "Start Page" for Collaboration folders and "Assay Dashboard" for Assay folders. If multiple tabs are defined, this single pre-configured tab, will always take display precedence over other tabs added regardless of its position left to right. To override this default behavior, hide the pre-configured tab and place whichever tab you want to be displayed by default in the leftmost position.

Custom Tabbed Folders

Developers can create custom folder types, including tabbed folders. For more information, see Modules: Folder Types.

Included in this topic:

• Create a Custom Menu
• Folders Menu
• List or Query Menu
• Resource Menus
• Study List: Links to all the studies in the project
• Assay List: Links to all the assays in the project
• Samples Menu: Links to all of the sample types in the project
• Define a Menu in a Wiki
• Menu Visibility: Control visibility of menus based on user permissions.
• Define a New Menu Type in a Custom Module (Developer option)

Add a Custom Menu

• From the project home page, select (Admin) > Folder > Project Settings.
• Click the Menu Bar tab.

There are several types of menu web part available. Each web part you add to this page will be available on the header bar throughout the project, ordered left to right as they are listed top to bottom on this page.

The Custom Menu type offers two options, the simplest being to create a menu of folders.

Folders Menu

• On the Create Custom Menu page, add a Custom Menu web part.
• The default Title is "My Menu"; edit it to better reflect your content.
• Select the radio button for Folders.
• Elect whether to include descendents (subfolders) and whether to limit the choice of root folder to the current project. If you do not check this box, you can make a menu of folders available anywhere on the site.
• Select the Root Folder. Children of that root will be listed as the menu. The root folder will not be presented on the menu itself, so you might choose to use it as the title of the menu.
• The Folder Types pulldown allows you to limit the type of folder on the menu if desired. For example, you might want a menu of workbooks or of flow folders. Select [all] or leave the field blank to show all folders.

• Click Submit to save your new menu.
• You will now see it next to the project menu, and there will be a matching web part on the Menu Bar tab of Project Settings. The links navigate the user to the named subfolder.

Continue to add a web part on this page for each custom menu you would like. Click Refresh Menu Bar to apply changes without leaving this page.

List or Query Menu

The other option on the creation page for the Custom Menu web part is "Create from List or Query". You might want to offer a menu of labs or use a query returning newly published work during the past week.

• On the Menu Bar page, add a Custom Menu web part.
• The default Title is "My Menu"; edit it to better reflect your content.
• Select Create from List or Query.
• Use the pulldowns to select the following in order. Each selection will determine the options in the following selection.
• Folder: The folder or project where the list or query can be found.
• Schema: The appropriate schema for the query, or "lists" for a list.
• Query: The query or list name.
• View: If more than one view exists for the query or list, select the one you want.
• Title Column: Choose what column to use for the menu display. In the "Labs" example shown here, perhaps "Principal Investigator" would be another display option.
• Click Submit to create the menu.

• Each item on the menu will link to the relevant list or query result.

Resource Menus

There are three built in custom menu types which will display links to all of the specific resources in the project. There are no customization options for these types.

Study List

If your project contains one or more studies, you can add a quick access menu for reaching the home page for any given study from the top bar.

If no studies exist, the menu will contain the message "No studies found in project <Project_Name>."

Assay List

If your project contains Assays, you can add a menu listing them, along with a manage button, for easy access from anywhere in your project.

If no assays exist, the menu will only contain the Manage Assays button.

Samples Menu

The Samples Menu similarly offers the option of a menu giving quick access to all the sample types in the project - the menu shows who uploaded them and when, and clicking the link takes you directly to the sample type.

If no samples exist, the menu will be empty.

Define a Menu in a Wiki

By creating a wiki page that is a series of links to other pages, folders, documents, or any destination you choose, you can customize a basic menu of common resources users can access from anywhere in the project.

• Create a new Wiki web part somewhere in the project where it will become a menu.
• Click Create a new wiki page in the new web part.
• Give your new page a unique title (such as "menuTeamA").
• Name your wiki as you want the menu title to appear "Team Links" in this example.
• Add links to folders and documents you have already created, in the order you want them to appear on the menu. For example, the wiki might contain:

[Overview|overview]

[Alpha Lab Home Page|http://localhost:8080/labkey/project/Andromeda/Alpha%020/begin.view?]

[Staff Phone Numbers|directory]

• In this example, we include three menu links: the overview document, the home page for the Alpha Lab, and the staff phone list document in that order.
• Save and Close the wiki, which will look something like this:

To add your wiki as a custom menu:

• Return to (Admin) > Folder > Project Settings. Click the Menu Bar tab.
• Select Wiki Menu from the <Add Web Part> pulldown and click Add. An empty wiki menu (named "Wiki") will be added.
• In the new web part, select Customize from the (triangle) menu.
• Select the location of your menu wiki from the pulldown for Folder containing the page to display. The "Page to display" pulldown will automatically populate with all wikis in that container.
• Select the menu wiki you just created, "menuTeamA (Team Links)" from the pulldown for Page to display:
• Click Submit to save.
• If your menu does not immediately appear in the menu bar, click Refresh Menu Bar.
• The team can now use your new menu anywhere in the Andromeda project to quickly access content.

Menu Visibility

By selecting the Permissions link from the pulldown on any menu web part on the Menu Bar tab, you can choose to show or hide the given menu based on the user's permission.

You must enter (Admin) > Page Admin Mode to see the "Permissions" option.

The Required Permission field is a pulldown of all the possible permission role levels. Check Permission On: allows you to specify where to check for that permission.

If the user does not have the required permission (or higher) on the specified location, they will not see that particular menu.

Define a New Menu Type in a Custom Module

If you have defined a web part type inside a custom module (for details of the example used here see Tutorial: Hello World Module), you can expose this web part as new type of custom menu to use by adding <location name="menu"> to the appropriate .webpart.xml file, for example:

<webpart xmlns="http://labkey.org/data/xml/webpart" 
  title="Hello World Web Part">
    <view name="begin"/>
    <locations>
        <location name="menu"/>
        <location name="body"/>
    </locations>
</webpart>

Your web part will now be available as a menu-type option:

The resulting menu will have the same title as defined in the view.xml file, and contain the contents. In the example from the Hello World Tutorial, the menu "Begin View" will show the text "Hello, World!"

Note that web part permissions settings do not change the security settings already present in the current folder and cannot be used to grant access to the resource displayed in the web part that the user does not already have.

• Enter > Page Admin Mode.
• Open the (triangle) menu for the web part you want to configure and choose Permissions.
• In the pop-up, select the Required Permission from the list of available permission levels (roles) a user may have.
• Note that the listing is not alphabetical. Fundamental roles like Insert/Update are listed at the bottom.
• Use the Check Permission On radio button to control whether the selected permission is required in the current container (the default) or another one.
• If you select Choose Folder, browse to select the desired folder.

• Click Save.

In the security user interface, administrators typically interact with "roles," which are named sets of permissions. The relationship between roles and permissions is described in detail in these topics:

• Role / Permissions Details Matrix - Details on the set of permissions provided by each role.
• Security Roles Reference - Provides the intent and function of each role.

Related Topics

• Control Custom Menu Visibility with Permissions