Virto Gantt Web Part for Microsoft SharePoint User and Installation Guide

Table of Contents

SYSTEM/DEVELOPER REQUIREMENTS 4

OPERATING SYSTEM 4

SERVER 4

BROWSER 4

INSTALLATION AND USAGE 5

INSTALLING VIRTO GANTT WEB PART 5

LICENSE ACTIVATION 8

UPGRADING VIRTO GANTT WEB PART 8

UNINSTALLING VIRTO GANTT WEB PART 8

ADMINISTRATION AND USAGE 10

ADDING WEB PART TO A SHAREPOINT SITE 10

VIRTO GANTT WEB PART SETTINGS 11

Data Source Settings 11

Grouping Settings 18

Gantt Settings 18

USING VIRTO GANTT WEB PART 23

Creating a Task 24

New Task Modes 27

Creating a Milestone Task 29

Gantt Chart Views 30

Timescale 31

Actions Menu 32

“Refresh” Action 32

“Today” Action 33

“Scroll to Task” Action 33

“View Task” Action 35

“Edit Task” Action 36

“Indent Task” and “Outdent Task”Action 37

“Delete Task” Action 40

Find and Filter Bar 43

Task Color Coding 45

Connections with External SharePoint Filters 50

Changing Task Duration 52

Resources 52

Changing Percent Complete 53

Calculated Columns 55

Printing Gantt Chart 56

VERSION RELEASE HISTORY 58

Virto Gantt Web Part for Microsoft SharePoint

Overview

Virto Gantt Web Part is intended to view list items in a Gantt chart to see a graphical representation of how a team's tasks relate over time in Microsoft SharePoint 2007, 2010 ad 2013.

Features List

Feature

Version

View list items in a Gantt chart

v.1.0

Using SharePoint list as a data source

v.1.0

Creating new tasks right in the Gantt chart

v.1.0

Creating milestones

v.1.0

Ability to transform simple task to a milestone

v.1.0

Applying different timescales to view items

v.1.0

Scrolling Gantt chart to required period of time

v.1.0

Scrolling to current day tasks

v.1.0

Scrolling to selected task and opening its view

v.1.0

Creating parent and child tasks

v.1.0

Changing task duration with drag and drop

v.1.0

Adding resources to Gantt view

v.1.0

Changing percent complete with drag and drop

v.1.0

Ability to define read-only settings

v.1.0

Ability to define colors for tasks and percent complete

v.1.0

Using special color for milestones

v.1.0

Creating child task for selected task from a context menu

v.1.0

Connections between Gantt and list items

v.1.2

Find and filter bar

v.1.2

Summary Task as Parent Folder (for SharePoint 2010)

v. 1.3

Three modes for task creating

v. 1.3

Multiple lines of text for description is supported

v. 1.3

Moving (reordering) tasks in drag & drop mode

v. 2.0

Showing the outline number (WBS) next to the task name

v. 2.0

Real Time Synchronization between multiple changes of Gantt users

v. 2.0

System/Developer Requirements

Operating System

Microsoft Windows Server 2003, 2008, 2012

Server

SharePoint Release 2013:

  • Microsoft Windows SharePoint Foundation 2013 or Microsoft Office SharePoint Server 2013;

  • Microsoft .NET Framework 4.5;

    SharePoint Release 2010:

  • Microsoft Windows SharePoint Foundation 2010 or Microsoft Office SharePoint Server 2010;

  • Microsoft .NET Framework 3.5;

    SharePoint Release 3:

  • Microsoft Windows SharePoint Services v3 or Microsoft Office SharePoint Server 2007;

  • Microsoft .NET Framework 3.5;

    Note: This product is not compatible with SPS 2003 and WSS v2.

    Browser

    Microsoft Internet Explorer 7 or higher.

    Installation and Usage

    This section describes how to install, upgrade, uninstall, or contact Support for the Virto Gantt View.

    Installing Virto Gantt Web Part

    Before you begin, you need to make sure you have access to the server and your account must have the appropriate administrative privileges to install applications.

    Virto Gantt Web Part for SharePoint setup program provides links to the various installation components for the calendar.

    To access Virto Gantt View Setup program download Virto.SharePoint.GanttWebPart.X.X.zip file and unzip it. Run extracted Setup.exe file.

    The setup wizard window will appear.

    image

    Virto Gantt Web Part wizard performs a system check prior to the installation. All the system checks must be completed successfully in order to proceed with the installation. After the checks have completed, click “Next”

  • image

    Check “I accept the terms in the License Agreement” and click “Next”.

    image

    Select the web application(s) where you want to install the product.

    Warning: You must be logged in to the SharePoint server with a Site Collection Administrator account to automatically activate this feature.

    image

    Then click “Next”.

    image

    Click “Close” to complete the installation.

    image

    License Activation

    To see full instruction for successful activation of your component, please download “Virto License Manager” PDF instruction.

    Upgrading Virto Gantt Web Part

    If you already use Virto Gantt Web Part and need to upgrade it to the latest version, download the.zip file from http://www.virtosoftware.com. Unzip the file and run setup.exe as it is described in the Installing Virto Gantt Web Part section.

    On the step 3 check the box “Upgrade” and click “Next”.

    Note: if you had activated the license while installing the previous Virto Gantt Web Part version, you do not need to activate it now.

    Uninstalling Virto Gantt Web Part

    To uninstall the component:

    1. Double click the Setup.exe extracted from downloaded Virto.SharePoint.GanttWeb Part.X.X.zip

      file.

    2. The program performs the system checks again. Once that has successfully completed, the program prompts you to Repair or Remove the solution. Select Remove, and click “Next”.

Administration and Usage

Adding Web Part to a SharePoint site

Go to SharePoint site where you want to add the calendar and open “Site Actions - Edit page”. You will switch to edit mode.

image

Click “Add a Web Part”.

image

Select Virto Gantt Web Part at the bottom of the list and click “Add”.

image

Once you have clicked “Add” button, use “Exit edit mode” button.

image

Added web part will be displayed on page. To adjust it, go to web part settings.

Virto Gantt Web Part Settings

Data Source Settings

To adjust Gantt view for SharePoint list, you need to define data source settings first of all. Go to web part settings (“Modify Shared Web Part”). Expand “Data source block”.

image

First of all enter the route to site where the source list is located and select SharePoint list.

image

Define a default view that will be used when you open Gantt Chart.

image

Check the box “Allow change view” to allow users changing a view when they open Gantt Chart.

image

Then you need to match fields from Gantt web part with source list fields. Three fields are required: “Task Name Column”, “Start Date Column” and “End Date Column”.

image

These fields are required. If they are defined Gantt chart will be displayed correctly. However you can also define such fields as:

  • Percent Complete Column;

  • Resource Column;

  • Parent Task Column;

  • Predecessor Task Column.

    image

    Note: any column can be selected as a source column for resources.

    Note: Virto Gantt Web Part for Microsoft SharePoint 2010 allows users to define summary task folder and select Summary Task folder as a parent folder.

    image

    You can add virtual field [Task Duration] to display duration of tasks in days.

    image

    image

    You can define default task duration.

    image

    Check the box “Read only” to disallow users to edit structure or titles of tasks in Gantt chart.

    If you want to display outline number (WBS), check the box “Show Outline Number”.

    image

    The number will be shown next to the task name.

    screen

    Note: even if there is no column for WBS in the SharePoint list, you can create a virtual column in the Grid for showing outline number.

    image

    Check the box “Show attachments icon” to show icons for items with attachments.

    image

    To define the order of columns or change width use “Edit” button and arrows on the right.

    image

    To add new column, just click “Add a new column”. You can make several columns frozen (always displayed on the left). Just enter number of columns you want to fix and apply the settings.

    image

    image

    To define which form will be displayed when new task is being added, select required mode in the New task mode block.

    image

    You can also predefine values for a new task. Set required parameters in the “Field Name=Field Value” format.

    image

    It is allowed to use moving tasks feature. Activate it in the web part settings. Virto Gantt View creates an additional hidden column “Task index” to keep information about tasks order.

    image

    To move a task from one row to another in the table section of the web part, select the entire task row with a mouse click of the gray row heading. Point to the row heading until a four-headed arrow appears, and then drag the chosen task to the place you need. A gray line along the row border indicates where the task will be inserted when you release the mouse button.

    image

    Grouping Settings

    You can adjust grouping and group tasks by different parameters. Complex grouping is available. Click “OK” or “Apply” to save the settings.

    image

    image

    Gantt Settings

    Gantt settings include appearance settings (width, height, Gantt Chart View Width, splitter position, default timescale, colors).

    image

    Gantt Chart View Width allows setting width of Gantt chart horizontally scrollable view. Default value is 2000. Minimum value is 1024. And maximum value is 5120.

    You can define first day of week and first week of yea to show. Check the box “Show week numbers” if you need to show them.

    image

    image

    Define default timescale for Gantt View web part.

    image

    Select scroll to task mode.

    image

    Select paging mode. You can apply full page mode or half page mode.

    image

    If you use “Full Page” mode, when you click next or previous page, you will go to the next period of time. For example, if you see “March 2001 – December 2011 – October 2012” and click “Next” in full page mode, you will move to “October 2012 – July 2012 – April 2013”.

    From:

    image

    To:

    image

    And if you use “Half Page” mode and click “Next” from the same page, you will move to a half of next period. From “March 2001 – December 2011 – October 2012” you will go to “December 2011 – October 2012 – July 2013”.

    From:

    image

    To:

    image

    Virto Gantt View allows users to fit start and end dates to required interval when changing the duration in the Gantt view. Just select required interval.

    image

    This means then when you change the task duration by dragging it will be changed with 1 day interval (the duration was 6 days, 7 days after changing on the screen).

    image

    Real-time synchronization is possible to use in Virto Gantt View. This feature allows configuring real-time data synchronization between multiple people working on the task in the Gantt view. Automatic synchronization is turned on by default. Just disable the feature, if it is not required.

    image

    If the feature is activated, once a user makes changes to the tasks, the same changes sees another user at the same time on his screen.

    Select colors for tasks.

    image

    image

    image

    Click “OK” when you define all the settings or “Apply” to save the settings and continue adjustment.

    Using Virto Gantt Web Part

    When the web pat is adjusted, it looks like as follows:

    image

    Left part includes list of tasks according and the right part shows structure (duration and relations). When you scroll tasks in the left part, the right part is scrolled accordingly.

    You can use zoom of Gantt chart to change size if displayed tasks.

    image

    Use navigation arrow buttons to go to required month.

    image

    Or select a date to navigate to in the date picker.

    image

    Creating a Task

    Virto Gantt web part allows users to create task right in the web part. The same changes will be done in SharePoint list.

    image

    New task will appear at the end of the list. Type the title (“New task” by default) and define start and end time of your new task.

    image

    image

    The task will appear in the Gantt chart on the right as well.

    image

    You can also use other modes of task creating. Please see the details in New Task Mode section. When you enter the description for a task, you can use multiple lines of text. As shown below.

    image

    New Task Modes

    Virto Gantt Web Part supports three modes of task creating:

  • “Create Task automatically”;

  • “Virto’s New Task Form”;

  • “SharePoint’s New Task Form”.

Create Task Automatically” mode is described in previous section. You just use “Create task” button to add a task. This mode is used by default.

If you need to change create new task mode, go to web part settings and select required mode in the “New Task Mode” block:

image

If “Virto’s New Task Form” mode is used, you will be able to fill out Virto’s New Task form as follows.

image

It is also possible to use “SharePoint’s New Task Form” mode. In this case new task form will look as follows:

image

Creating a Milestone Task

Virto web part allows creating milestones - tasks with zero duration. Just create new task as described in previous section and define equal start and end date and time.

image

Or just click right mouse button on a task on the left and use “Convert to milestone” option.

image

image

Gantt Chart Views

If views are supported in the Gantt Chart (see web part settings), you will see “View” menu. You can use any view from the list of available ones. Views are defined in SharePoint list settings.

image

image

Timescale

You can easily switch to required timescale in Gantt web part. Click “Timescale” and select required scale view for the chart. The following options are available: “Hours”, “Quarter Days”, “Days”, “Weeks”, “Thirds of Months”, “Months”, “Quarters”, “Half Years”.

image

image

Actions Menu

“Actions” menu includes several actions which web part users can do. They are: “Refresh”, “Today”, “Scroll to Task”, “View Task”, “Indent Task”, “Outdent Task”, “Delete Task”.

“Refresh” Action

When you need to refresh Gantt chart to see, just got to “Actions – Refresh”.

image

“Today” Action

If you need to scroll chat view to current date, go to “Action – Today”.

image

“Scroll to Task” Action

If you need to scroll chat view to a task, click task title on the left and then go to “Action – Scroll to Task”.

image

You can also define which part of chart will be shown when you use scroll to task action (can be set in Gantt settings) – beginning of the view or middle part.

image

Middle of the View:

image

“View Task” Action

If you want to scroll chart to selected task and view its details, use “View Task” option in “Actions” menu.

image

image

“Edit Task” Action

If you need to edit a task, just click on it and them go to “Actions” menu and choose “Edit Task” option.

image

You will go to edit task page where you can make all the required modifications with this task.

image

“Indent Task” and “Outdent Task”Action

Sometimes you need to define parent-child relations between tasks in the Gantt chart. If you want to make selected task a child task (sub-task), use “Indent Task” in “Actions” menu. Or use “Outdent” to cancel this action and put selected task onto higher level back.

Or this way:

image

image

image

image

These changes will be reflected in Gantt chart as well.

You can select more than one task and make all of them child-tasks with “Indent Task” action.

image

image

You can create child tasks right from the context menu. Just highlight the task which will contain new child task and use “New Child Task” option.

image

“Delete Task” Action

To delete a task from Gantt chart, select it and choose “Actions – Delete Task”.

image

The same actions are available when you click a task and open context menu.

image

Finish-to-Start Relations

Virto Gantt web part allows users to define finish-to-start relations between tasks and create successors and predecessors. Just click a task that will be a predecessor and drag it to a task which you want to make a successor.

image

You will see the relations on the left. Successor will start right after predecessor ends.

image

To delete elation, just click it with right mouse button and click “Delete”.

image

Moving Tasks

You can easily change task dates by simple moving. Use your mouse to move tasks to other dates by simple drag and drop.

image

image

image

Start and end dates of this task will be changed. The same changes will be done in SharePoint list.

Find and Filter Bar

In case you need to find a single item or several items in a long list of tasks you can use Find and Filter Bar. Two modes of filtering are available.

You can start typing part of title (part of assigned user name and etc.) The list of tasks will be shown accordingly. This is Simple Filter mode.

image

Or you can apply Advanced Filter mode for tasks and define filtering parameters of tasks you need to find. Click “Advanced Filter”.

image

Then define custom filter in the displayed window with “Add new filter” button. Click “OK” to save filter.

image

Tasks will be displayed according to this filter. You can switch it off by unchecking the checkbox.

image

To switch back to Simple Filter mode click “Simple Filter”.

image

To delete filter uncheck the checkbox.

image

Note: filter settings are saved in Silverlight Application Storage for current user machine.

You can define whether find and filter bar will be hidden or shown by default.

Go to web part settings, roll down to “Gantt settings” and check/uncheck the box “Show Find and Filter Bar”. Click “Save” to save the settings.

image

Task Color Coding

Virto Gantt web part supports color coding of tasks. You can easily define your scheme to be used for Gantt view and highlight tasks with different colors depending on set conditions (for example, the most popular way scheme of color coding is depending on due date, so overdue tasks will highlighted with a certain color in the Gantt view).

image

To define the settings for tasks color coding, go to web part settings and roll down to Tasks Color Coding settings.

image

The following color scheme is defined by default: completed, in progress and overdue. You can change the order of these items. Click “Edit” to change the settings.

image

Define name of color scheme, set conditions. You can set any conditions you need to be used and any amount of them.

image

Then you can define color of the flag (from dropdown) and then colors of task, progress bar, background row, foreground row. Colors are set with RGB.

image

Flags look this way in the chart:

image

You can put “Star” instead of a flag:

image

image

Click “Save” to save the settings.

image

Then enlarge “Gantt settings” block and check the box “Show Task Color Coding legend”.

image

Click “OK” or “Apply” to save the settings. In this case in progress tasks are yellow highlighted, completed tasks are green highlighted and overdue tasks are re highlighted.

image

Connections with External SharePoint Filters

Virto Gantt View allows users to use items from a SharePoint list as a filter for Gantt view tasks. This way users can connect data in web parts and filter a Web Part by using values from another Web Part — all on one Web Part page.

For example, you can connect SharePoint list of projects with Gantt web part and show tasks related to a selected project (list of projects and Gantt web part are added to the SharePoint site page).

Go to edit mode and add filter to the web part page (choice filter in our case).

image

Then click “Edit – Connections – Get Filters From - Projects” in the page edit menu.

image

Now when you select a project in the list, the list of tasks in Gantt view will be changed accordingly.

You can find more information about connections between web parts in Connect data in Web Parts article.

Changing Task Duration

Virto Gantt web part allows users to change task duration by drag and drop. Just drag start or end of a task to required date and drop it.

image

image

End date will be changed. The same changes will be done in SharePoint list.

Resources

Users assigned to a task are displayed near corresponding tasks in the chart (see web part settings to adjust).

Users will be taken from SharePoint list. To assign a user, just select a required one from the list. The same changes will be done in SharePoint list.

image

Changing Percent Complete

If percent complete field is added (see data source settings), you can easily change percent complete right in the Gantt chart. Just drag and drop percentage to required number.

image

image

You can easily change percent complete by drag and drop.

image

image

Percent Complete column value can be automatically calculated for parent tasks. Go to web part settings and check the box “Calculate summary task progress automatically”.

image

Now when you change child tasks’ percent complete, it will be calculated automatically for the parent task.

image

Calculated Columns

You can use calculated fields for Gantt View. For example, you can include calculated field “Currency” into the list of task columns.

image

image

Printing Gantt Chart

To print Gantt chart, use “Print button”. There are four print options: “Print All”, “Print table only”, “Print Gantt Chart Only” and “Print Current View”. Select required option and print the chart.

!•••1 Gantt View Group By

Virto Gantt Web Part for SharePoint

, [ ¢New I (ij} View: All I 0Timescale: Days [ [?Actions (±) l

Print All

January 1

ID lrtl e

" D- Assigned To: (20)

- Status:In Progress (2)

70 Call John

% C:Omplete Assigned To Print Table Only

Print Gantt Chart Only Print Current View

30

3 I 4 I !

-=

88 Learning peculiarities

- Status: Not Started (16)

78 Conducting researches

80 Making competitors analysis

81 Researching growth

82 New Task

23

30

100

80

70

Version Release History

Release Date

Version

Description

09/10/2013

3.0.0

Added new license manager.

06/13/2012

2.0.0

Added abilities to move (reorder) tasks. Go to Web Part settings and activate Moving Task feature.

Added Show the Outline Number (WBS) web part property. Allows showing the Outline Number (WBS) next to the task name.

Added WBS virtual column.

Added "Fit Start Date, End Date in N Minutes" web-part property. Added "Real Time Synchronization" web-part property in Gantt settings section. Allows configuring real time data synchronization between multiple people working on the tasks.

Added "change case" functionality for TextBox, like word has with Shift+F3. Switching between Upper -> lower -> Title Case.

Added "Summary Task Background Row Color" property in Gantt settings section.

Added "Summary Task Foreground Row Color" property in Gantt settings section.

Updated "SharePoint's New Task Form" can create Summary Folder and Sub-Tasks.

Fixed if I change the start date, the duration is changed. Fixed lookup column to date-time column source.

Fixed allow the user to set the end date of the task before the start date. Fixed Group name is empty if task title was not added to grid.

Fixed Create new task in parent task from context menu. Fixed connecting multiple filters with Gantt View Web Part.

Fixed problem with Click and drag Finish to Start feature in the Gantt Chart if browser zoom level is not equal 100%.

12/26/2011

1.9.0

Added Czech localization.

Added "Gantt Chart View Width" web part property. Allows setting width of Gantt Chart horizontally scrollable view. Default value: 2000. Min value: 1024. Max value: 5120.

Added "Paging Mode" web part property. Allows configure page size when you clicking the previous or next page button.

Added Support scroll with the mouse wheel in Gantt Chart, which is equivalent to pressing an arrow key or to clicking the arrow button on a scrollbar.

Improved performance.

Fixed "Sometimes, Gantt UI is frozen after making a relation between tasks" problem.

Fixed "[IsolatedStorage_StoreNotOpen]" exception.

11/23/2011

1.7.0

Added Navigation panel. Added Duration virtual column.

Support "Average Rating" field type. Modified Filter panel.

Fixed task title disappear if print.

Fixed ArgumentOutOfRange exception if start and end date is empty. Fixed New Task button is disabled.

10/25/2011

1.6.0

Added Save splitter position into Silverlight Application storage.

Added "Show horizontal lines" web part property. Shows horizontal lines in Gantt chart. Default value is false.

Added "Default Task Duration" web part property. Sets default task duration for new task. Default value is 72 hours.

Updated Virto New Task Form. Updated control UI.

Updated Virto New Task Form. Added a required field validator. Updated Virto New Task Form. Virto New Task Form is resizable.

08/30/2011

v. 1.5.0

Added Task color coding settings. Added Task color coding legend. Fixed minor bugs.

06/03/2011

v. 1.3.0

Support Summary Task as Parent Folder. (For SharePoint 2010)

Added Create a new task Modes: Create task automatically, Show Virto's New Task Form, Show SharePoint's New Task Form and Disable.

Added "Default Values for New Task" web part property. You can set default property values for new task. Use FieldName=FieldValue format. Added "Multiple lines of text" inline editor.

Added Scroll To Task Modes: Middle of the View, Begin of the View. Support "Virto Cross Site and Cascaded Look up" field type.

Support "Dependent Lookup" field type.

Updated Gantt Resources. Support all column types. Fixed Default view doesn't work correctly.

Fixed Task sorting if SharePoint Filter Provider is set. Fixed Empty Gantt View for Arabic localization.

Fixed minor bugs.

04/12/2011

v. 1.2.3

Added "Calculate summary task progress automatically" web-part property. Specifies whether the parent/summary task progress will be calculated automatically based on the child tasks.

04/11/2011

v. 1.2.2

Updated find and filter engine. Improve performance.

Updated "Percent Complete Column" for parent task is auto-calculated. Fixed find child task if Parent column was set.

03/23/2011

v. 1.2.0

Added connect to external SharePoint Filter Providers. Use to consume a filter expression from a Web Part that has implemented an IFilterProvider interface.

Added "Find and Filter Bar".

Added support custom filter expressions.

Added "Show Find And Filter Bar" web part property. Added "Show Attachments Icon" web part property. Added "First Day of Week" web part property.

Added "First Week of Year" web part property.

Added "Show Week Numbers in Weeks Timescale" web part property. Added grid column with preview for "Multiple Text" field type.

Added remember current filter in Silverlight Application Storage. Added remember Find and Filter Bar position in Silverlight Application Storage.

12/27/2010

v. 1.1.0

Added Support list view.

Added "Allow change view" property. User could change view from

client control.

Added "Stop Expand Level" property. 0 - expand all. 1 .. N - don't expand task from this level

Added Load Date or Date-Time field format from list settings. Added "Edit item" context menu. Opens task edit page.

Added Save current view in Silverlight Application Storage. More info http://www.microsoft.com/getsilverlight/resources/documentation/App Storage.aspx

Added Remember the expand/collapse state in Silverlight Application Storage.

Added Support group by field. Added Full-Screen Mode.

Added "Action/Outline" menu.

Added Support "Hyperlink and Image" field.

Updated Use "Del" button to clear Date-Time value in data grid.

10/15/2010

v. 1.0.0

First public release.