skybow Tabbed Pages User Guide

Document created by RosarioM on Jul 29, 2016Last modified by RosarioM on Oct 11, 2016
Version 19Show Document
  • View in full screen mode

Table of contents

 

Getting Started

Overview

skybow Tabbed Pages App allows to tabify SharePoint Forms or Views in SharePoint Online (Office 365) , SharePoint 2013 or higher, to bring more structure to your SharePoint list data.

Organizing tab contents as pages allows to improve performance because only web parts needed on the page are loaded.

  • Provides Tabs for structuring Forms and Views
  • Separate ASPX page per Tab for improved performance
  • Design UI provides WYSWYG configuration
  • Multiple level Tabs supported (up to 2 levels)
  • Add/Delete/Rename
  • Tabs
  • Add/Delete/Rename sub-tabs
  • Use drag & drop functionality to reorder the Tabs
  • Add an icon to a Tab
  • Make further settings like changing ASPX page name!

 

 

 

Note: This SharePoint Add-In works only SharePoint 2013 or higher.

 

 

 

Support

For any questions or technical issues, you can contact us. Here are our contact details.

skybow Support

Tabbed Pages Documentation

 

skybow Foundation

The functionalities of Add-Ins require a higher level of privileges on Office 365 since the Add-Ins that are offered in Microsoft store have some restrictions placed upon them. Therefore, the manually installed Add-Ins are permitted to execute the advanced actions.

The skybow Foundation Add-In is one such manually installed Add-In with some functional capabilities that are otherwise not allowed to be executed by us in MS store. This Add-In provides services for all the skybow Add-Ins to work efficiently as well as enhance their feature set. Essentially, instead of implementing the same set of capabilities in each of our Add-Ins, this utility is loaded with shared functionalities that can hence serve all our skybow Add-Ins.

Installing Tabbed Pages

 

Pre-requisites

To be able to add this Add-In, you need to have site collection administrator privileges. Also, the scripting capabilities should be turned on in tenant-wide settings. The App Catalog must be modified accordingly to accommodate Tabbed Pages which works on-premise with SharePoint 2013 or higher.

 

1. From your SharePoint environment go to Setting, Site Contents and then Add an App

 

SiteContents.PNG

 

 

 

2. Then on your left site click on SharePoint Store



 

 

 

3. And search for the skybow products

 

 

 

 

4. Select skybow Tabbed Pages Add-In from the list.

    The Office Store for skybow Tabbed Pages will be displayed.

    Click on Add It


 

 

 

 

5. In skybow Tabbed Pages app click on Request License.

    You will receive the License per e-mail.

 

 

 

 

6. After receive the License per e-mail, make the Upload.

 

 

 

7. The skybow Tabbed Pages app will appear on Lists, Libraries, and other Apps - Site Contents page.

    Click on skybow Tabbed Pages app.

 

 

 

8. The skybow Tabbed Pages App Homepage is shown

 

TabbedPages2.PNG


Adding skybow Tabbed Pages App Add-In to your SharePoint Online/On-Premises Site

 

 

1. From any page where you are, go to Settings, Add an app and will be displayed the Apps that you can add.

 

 

 

or

 

2. Other way is, searching through the Filter.

 

 

 

2. And make Trust it

 

 

Request License

 

 

1. On Site Contents - Lists, Libraries, and other Apps click on skybow List View Search app.

    The Skybow Tabbed Pages App will be displayed

 

 

 

 

2. Select Request License

 

 

 

3. Fulfill the skybow License Request

 

4. And will appear a "Thank you message"

 

5. You will receive your License per E-mail

 

Upload license

1. Go to skybow Tabbed Pages.

    One way it's, through the Site Contents - Lists, Libraries, and other click on skybow Tabbed Pages app.

 

2. On skybow Tabbed Pages page click on Upload License

 

 

 

 

3. Choose the License File to upload

 

4. The Tabbed Pages app will be displayed

 

 

Configuring skybow Tabbed Pages

 

skybow Tabbed Pages App, Page Overview

 

The skybow Tabbed Pages page is where you configure Tabbed Pages to add it to Views, Pages or Forms.

After adding the Add-Into the site, it will appear on the Site Contents page. You can go to the Add-In clicking on Site Contents Page and will take you to the skybow Tabbed Pages page.

 

The skybow Tabbed Pages page is where you configure List View, here you can add it  Views, Pages or Forms.

 

The skybow Tabbed Pages page has the following sections:

   1. Instructions & Support - In this section, you can view introduction video, check out documentation or contact support for any queries.

   2. Configure list view – In this section, you can configure List View  to add it to Views or Forms.

  • Adding to Forms from Add-In App Page
  • Adding to Views from Add-In App Page

   3. About This App – In this section, you can view version details and rate this Add-In.

   4. Other Accelerators from skybow – In this section, you can access other SharePoint accelerators from skybow, such as skybow Rich Forms, skybow List View Search, skybow Action Links and skybow Theme Designer.

 


 

 

 

Ways to Add Tabbed Pages App Part

 

There are 3 ways in which you can add a Tabbed Pages app part to either Views or Forms.

 

1. From the skybow Tabbed Pages App page

Specify where to add Tabbed Pages app and select the further options depending on it.

On the App page, specify where to add skybow Tabbed Pages app and select further options depending on it. For more information, refer to the following sections:

  • Adding to Views from Add-In App Page
  • Adding to Forms from Add-In App Page

 

 

 

 

2. Out of the box app part inserting

The App part can be placed on every possible List View, as well as on any List Form:

  • Display Form
  • Edit Form
  • New Form

This is done by using the SharePoint SharePoint 2013 functionality for adding an app part.

Select the Tabbed Pages app part to insert it in the page.

From page, go to Settings then Edit a Page.

 

 

TabbedPagesEditpage.PNG

 

And then on the top of the header page click on Insert - skybow Tabbed Pages and Add

 

 

 

 

And your skybow Tabbed Pages will be displayed

 

 

tabbedPages.PNG

 

 

 

3. Ribbon option on the Tabbed Pages

To add the Tabbed Pages app to the current view, select Tabbed Pages app option on the list view ribbon.

 

 

 

 

 

Adding to Forms from Add-In App Page

On the Tabbed Pages page, specify where to add Tabbed Pages app and select further options depending on the form you select.

  • Select the required lists and libraries option where you want to insert the web part from the skybow Tabbed Pages App.
  • Select the required from the Forms.
  • Click Tabify.

 

 

TabbedPagesForms.PNG

 

 

The skybow Tabbed Pages will be displayed on the selected form.

 

Adding to Views from Add-In App Homepage

On the Tabbed Pages app homepage, specify where to add skybow Tabbed Pages and select further options depending on the form you select.

  • Select the required lists and libraries option, where you want to insert the web part from the skybow Tabbed Pages.
  • Select the required form Views
  • Click Tabify.

 

 

 

The new skybow Tabbed Pages will be displayed.

 

 

TabbedPagesTabify.PNG

 

 

 

Adding to Page from Ribbon Option

The Tabbed Pages app option on the list ribbon allows you to add app part.

  1. Navigate to any desired page.
  2. Click Settings button and select Edit Page (click on the Contacts part, just for activate the Ribbon Option).
  3. Select List > Tabify Form Page.

 

 

 

The new skybow Tabbed Page will be displayed on the selected form.

 

 

Adding to Page from Web Parts Collection

The App Part can be placed on every possible List View, as well as on any Page or List or View with a List View web part on it.

  1. Navigate to any desired page.
  2. On the page, you click Add a Web Part link.

 

 

 

 

Or

 

   1. Click Settings button and select Edit Page.

   2. Select Insert > Web Part.

 

 

  1. Select the web part you want to add from the list.
  2. Click Add.

     The web part will be added.

 

 

 

Drag and Drop

Tabbed Pages uses a drag and drop interface. Tabs can be dragged and dropped to reposition them.

The following is possible:

  • Moving a Tab inside a certain level.
  • Moving a Tab from one level to another level. E.g. subtab to main tab section.

When dragging a Tab, move it over the edge of another Tab or into the subtab level of the current Tab.

 

 

TPdragdrop.png

 

 

Configuring in Design Mode

 

Design Mode Configuration Overview

An administrator of a SharePoint environment can also configure or change the configuration of the skybow Tabbed Pages app part. This happens directly on the ASPX page where the Tabbed Pages web part is placed on Edit mode of the page.

 

 

 

Adding Tabs

When the app part is placed onto a Forms/Views, it automatically creates a Tab. The ASPX page used for this Tab is the current Forms/Views page.

 

tpFirstTime.png

 

When a new Tab is added and a user leaves the Edit title mode, the app navigates to the newly created ASPX Tab page.

If Tab name is the same as the name of a previously deleted Tab, this deleted Tab is restored.

 

 

Adding Tabs to List Views

When Tabbed Pages are added to the list view, each new Tab creates an additional view and creates it our own specific space.

 

tpViews.png

 

All new views (except for the hidden ones) can be seen on the List Settings page.

 

tpViews2.png

 

 

Naming Tabs Pages

ASPX page names are given automatically using the following logic:

  • First tab (Tab1): Name of the current form/view., e.g. NewForm.aspx.
  • Second tab (Tab2): [Name of the current form/view]_[Second tab's name] , e.g. NewForm_Tab2.aspx.
  • First tab's subtab (Sub1): [Name of the current form/view]_[Subtab's name], e.g. NewForm_Sub1.aspx.
  • Second tab's subtab (Sub2): [Name of the current form/view]_[Second tab's name]_[Second tab's subtab's name], e.g. NewForm_Tab2_Sub2.aspx.

 

Long Title

If tab's title is too long it is not displayed completely.

 

LongName2.png

 

Different languages

Tabbed Pages supports different languages: title can be set in any language.

 

 

lang.png

 

But in this case ASPX page name would look as following:

AllItems_%D0%92%D0%BD%D1%83%D1%82%D1%80%D1%96%D1%88%D0%BD%D1%96%20%D0%BA%D0%BE%D0%BD%D1%82%D0%B0%D0%BA%D1%82%D0%B8.aspx

 

 

 

 

Adding SubTabs

It is possible to add a subtab level to a Tab. Currently 2 levels are supported:

  • MainTabLevel      
    • SubTabLevel

 

Subtab can be added by clicking the sign that is displayed in the row below the main Tabs.

Before adding a subtab:

 

tps1.png

 

 

After adding a first subtab:

 

tps2.png

 

All  Tabs can be reordered using the quick and easy drag and drop functionality.

 

 

Deleting Tabs

Deleting a Tab does not mean that the whole ASPX page is deleted, the Tab will just not appear anymore. The page is kept, but renamed by adding _isDeleted.aspx.

Because only the Tab is removed and the ASPX is not deleted, it is always possible to restore a tab again by adding a tab with the same name.

 

To delete a Tab, click the corresponding button right of the tab's title:

 

DeleteTab2.png

 

and confirm your intention by clicking 'Yes' in the dialog appearing:

 

 

DeleteTab.png

 

 

Icon of a Tab

The look of the Tabs can be significantly improved by adding icons.

 

tpicons.png

 

 

This can be done by clicking on the image rectangle left of the Tab's title. The out of the box context menu for selecting images then appears.

 

 

 

tpIcon.png

 

 

 

From Computer

 

fromComp.png

 

 

From Address

 

fromAddress.png

 

 

 

From SharePoint

 

fromSharepoint.png

 

Alternatively, icons can be added or changed in the Configuration Dialog.

 

To remove the icon, select the corresponding option in the context menu.

 

removeIcon.png

 

 

 

Ordering

The ordering of the Tabs is possible using the drag and drop functionality.

The following is possible:

  • Moving a Tab inside a certain level.
  • Moving a Tab from one level to another level. E.g. subtab to main tab section.

 

 

 

 

Styling

For having another style it is possible to overwrite the css Tags.

 

 

Further Configuration Possibilities

The gear symbol that is available on every tab opens a the Tab's Configuration dialog.

 

gearSymbol.png

 

 

It allows configuring of the following:

 

confDialog.png

 

Is Default Form property available only in forms. Tab with checked Is Default Form property becomes default list form.

Attachments

    Outcomes