AURUM Metro Navigation

Transcription

1 AURUM Metro Navigation End User Document Version 1.0 Oct 2016

2 Table of Contents 1. Introduction Initialization Create Metro Navigation List Adding the Metro Navigation Web part Metro Navigation List Elements Create New List Item Basic configuration Link configuration Image configuration Image Slider configuration Video configuration Announcement configuration Empty configuration Default View View List Item Update List Item Delete List Item Metro Navigation Webpart Properties Overall Demo Page Contacts... 70

3 1. Introduction The Aurum Metro Navigation create a clear SharePoint navigation in the trendy Windows 10-style to lists, libraries, sites, and other relevant locations. With a few clicks you will get your corporate identity. The links are presented in such a way that it is not only clear but also up-to-date. The spontaneous navigation structure works both on computer as well as on mobile devices such as the ipad and it is comfortable to use. You can create the navigation easily with a few clicks in a simple list, everything else will be handled by AURUM Metro Navigation. Do you want to add additional descriptive information? No problem - the product can accommodate a title or short texts which can be faded in or faded out by drop down menu. Whatever content, graphics or links, you decide, the creative possibilities are almost unlimited!

4 2. Initialization 2.1 Create Metro Navigation List To create a Metro Navigation list, the app should be downloaded and installed from the SharePoint store. The app can also be directly accessed using the below url: 001&ad=US&appredirect=false The below process should be followed in a On-Premise or SharePoint Online environment. In the below scenario the SharePoint online is taken into consideration. 1. Login to the SharePoint Online site. 2. Select the Site Contents in the Left Navigation Menu.

5 3. Select the add an app under Lists, Libraries, and other Apps 4. Select the SharePoint Store from the left navigation menu.

6 5. Type AURUM Metro Navigation in the Find an app textbox available in the top right corner and click on the search icon. 6. Select the AURUM Metro Navigation app from the search result.

7 7. Select the BUY IT or TRY IT button to install in the app. BUY IT will be leading the user to the payment process. TRY IT will be enable the app to be used as a trial version for 1 person for 30 days.

8 8. This will follow through a confirmation process. Click continue. 9. Also, there will be an additional confirmation to enable the user to trust the SharePoint app and change the language using the Show Language Options. Select the Trust it button. Note: Currently the Metro Navigation app supports two languages English and Deutsch.

9 10. The app will be installed in the selected site. This will take a few moment and the process could be viewed in the Site Contents page. 11. Once the installation is completed the Metro Navigation app will be enabled.

10 2.1.1 Adding the Metro Navigation Web part 1. Web part can be added in any of the web page. For this, a new webpage is created to add the web part.

11 2. Select Site Pages under Lists, Libraries and other Apps. 3. Select the New button to create a new page.

12 4. Enter a name for the new page in the New page name textbox and select the Create button. 5. Once created the page will be displayed in edit mode. On the SharePoint Ribbon, select the INSERT tab.

13 12. Select Web Part in Parts group. 13. Select Metro Navigation from left hand side under Parts.

14 14. Select Add button. 15. Select the Save button on the FORMAT TEXT tab in the SharePoint ribbon. This will save the page and close the editing. 16. Check the web part added. The dropdown View Name will be containing all view names available in the Metro Navigation list. Select the list view from the dropdown box. In this scenario, the selected view is All Items.

15 17. Click on Save button to save the values as the Metro Navigation web part properties. If there are list items present in the List View the metro web part tiles will be displayed. The above procedure can be used to add the web part in various pages with various list views. 18. A pop message will appear to confirm that the metro navigation properties has been saved.

16 3. Metro Navigation List Elements 3.1 Create New List Item 1. Select the Site Contents in the Left Navigation Menu. 2. Click on AURUM Metro Navigation app created in the previous section. The page will be redirected to the AURUM Metro Navigation list.

17 3. Click on New Item link.

18 4. New Item can be saved by using the Save button available in the SharePoint Ribbon or in the bottom of the page. Clicking on Cancel button will redirect to the Default List view. 5. The List Item contains few configuration sections which are explained below.

19 Basic configuration 1. Title: A text field which displays the title of the metro Tile. Title will be displayed at the bottom of the Tile. 2. Background Color: An input field to select the background color of the metro tile. Clicking on the textbox or on the square box available in the right side of textbox will open a popup for choosing the colors. By default, white color is used. User could also type in the color with appropriate format (ex. #fff or #ffffff). a. Theme Colors: Displays the variety of theme colors. By default, theme colors are displayed. b. Standard Colors: Displays the regular theme colors like red, green, yellow etc. c. History: Displays the last used colors (10 colors max) within the site. Standard Colors will not be stored in History.

20 d. Web Colors: Clicking on this link will enable to view the Web default palette. Below the Web Colors or Theme Colors link, the last selected background color is displayed and to the right the current selection (based on the mouse movement) is displayed. Sample display of the Metro Navigation web part after Background Color is updated.

21 3. Font Color An input field to select the font color of the metro tile. By default, white color is used. The Color popup has the same functionality as explained in Background Color. Display of the Metro Navigation web part after Font Color is updated. 4. Image/ Icon: The image or icon can be selected to display as a background picture in the metro tile. By default, Metro Navigation provides more than 3000 icons with different categories.

22 4.1 Image: Clicking on Image button, a popup window is displayed to select the images from any libraries in the site collection. Note: In this scenario the sample Images library is already created and then added with few images. Select the image from the popup window and click on Insert button. The popup window will be closed and the image relative location will be displayed in the Image/Icon textbox. Clicking on Cancel button or cross symbol ( ) on top right edge of the screen to close the window. Display of the Metro Navigation web part after Image is updated.

23 4.2 Icon: Clicking on Icon button, a popup window is displayed to configure the icon library. Select URL button will allow to select the icon library within the SharePoint site. Save button is used to save the configuration. In this scenario, a predefined icon library is selected and saved.

24 1. By default, the icons from the root folder are displayed. Other sub folders are hidden by default. 2. To select the preferred folder, click on the Choose Folders button available on the left side. 3. A popup window appears with a list of folders. select the preferred icon folders and click on Save button. This will close the window and refresh the folders section. The same process is repeated for unselecting the folders. 4. Clicking on Cancel button will close the popup.

25 5. Selected folders will be available below the choose folders button. 6. Clicking on the folder will display all the icons available in the folder in the right-hand side display panel. 7. From the displayed items the user can select the icon directly or can use the search functionality to find a particular icon. Searching is enabled with two options in current folder and in all folders. Provide a search text in the textbox and click on the Search Button. The search results will appear in the display panel.

26 8. From the displayed results select the desired icon. Selected icon s relative location will be displayed in the Selected Image text box. 9. Click on Insert button. The Popup window will be closed and the icon location is copied to the Image / Icon textbox in the list item window. Clicking on Cancel button will close the popup window. Display of the Metro Navigation web part after Icon is updated.

27 5. Tile Center Text: This enables the title text to be aligned in center of the tile. Check the checkbox to enable this option. Display of the Metro Navigation web part after Tile Center Text is updated. Note: Tile Center Text should be used when there is no image or icon. 6. SharePoint 2013 Style: This enables title to be displayed as SharePoint 2013 style tile. Check the checkbox to enable this option. Note: Only one option can be selected in Tile Center Text or SharePoint 2013 style. If one of the checkbox is checked the other one is unchecked and disabled automatically. Display of the Metro Navigation web part after SharePoint 2013 Style is updated. 1) Before mouse over 2) After mouse over

28 7. Text: An input field for the brief description of the metro tile. Display of the Metro Navigation web part after Text is updated. 6. Position: When there is more than one list item in the metro navigation list this option helps to configure the position of the tile. Only numbers are allowed in the Position. Consider a scenario, the first tile created in the above examples now needs to be in the second position and a new tile to be introduced to be placed in front of the first tile. For this update value of current list item (Title: News ) Position textbox as 2 (Click here to view how to update a list item). Add a new list item following the steps above. Provide the Position textbox value as 1. For this scenario the second list item is saved with information as below Title : Information Background Color : #4f81bd Position : 1

29 Display of the Metro Navigation web part after Position is updated. 7. Size: The value here defines the dimension of the metro tile. There are five pre-defined dimensions provided. By default, Small (1x1) is selected. Here the custom dimension is also supported. For this Other option should be selected. For updating the custom type Other the format should be exactly equal to AxB, where A and B are greater than zero. Size Display of Tiles Small (1x1) Wide (1x2) Tall (2x1)

30 Medium (2x2) Big (2x4) Large (4x4) For this scenario, the Other is updated as 1x3 Other * The above tile sizes are reduced 60% for displaying in the document.

31 8. Metro Type: The metro type defines the type of tile that needs to be generated in the web part. Default type is Link. Each metro type has different list of items to be updated. If any one of item is updated and later if there is a change in the metro type itself (ex: Link to Image ), a popup window will appear, to confirm from the user that all changes will be lost in the existing metro type. Click OK to continue with the change. Click Cancel to discard the change. Metro type has six different configurations. These are explained in the below sections Link configuration i) URL: In the link configuration, the URL and Display in window type could be configured.

32 Click on the Select URL button. This will open a popup window. Select any link within the site collection. Once selected, click on the Insert button. The popup window will be closed and location URL will be inserted in the URL textbox available in the Link configuration. Cancel button will close the popup window. ii) Display in: This option is available to select the display in window type for the URL link above. There are three options available. Embedded: Open the link in the same window. New Window: Open the link in the new window. Modal Window: Open the link in the Modal Window. For Modal window the width and height can be specified. Once the Modal Window is selected, the Width and Height option will become visible. If not provided, the default width and height will be 500x500 pixels.

33 Display of the Metro Navigation web part after Modal Window is updated. Click on the Metro tile to get the modal window visible Image configuration Image has same properties (URL, Display-in) as Link configuration. But, instead of selecting a link the user should select the location of an image in the property URL. The additional property available in Image configuration is Fit to Window. This is available when the Modal Window in the Display In property is selected.

34

35 i) Fit to Window: This option is provided to fit the image in the modal window with the width and height provided. To fit the selected image URL in the modal window, please check the checkbox. If the image dimensions are larger than the Modal Window width and height, the image dimensions will be reduced. If the Modal Window width and height are larger than the image dimensions, the image will be center aligned. Display of the Metro Navigation web part after Image with Modal Window (Width:480, Height:270) is updated Click on the Metro tile to make the modal window visible.

36 Image Slider configuration Image Slider option is to display the images as slides in the metro tile. For this the images should be uploaded in a Picture Library. 1) Image List Name: All Picture Libraries in the current site will be available in this dropdown. Create a Picture library named Images (any picture library can be used, but in the below example, the already created Images picture library containing few images will be used) or use a custom picture library. Select Images library in the Image List Name. Sample images available in Images picture library

37 2) Image View Name Based on the Image List Name selected, all views presented in the library will be loaded. Select the view name All Pictures or any view. If view name is not selected, the default view of the picture library will be selected. Select Images in the Image View Name. Display of the Metro Navigation web part after Image List Name and Image View Name is updated Seconds Display

38 3) Slider bullets style This option is to display a bullet icon in the bottom of the image. So the user doesn t need to wait for 10 seconds to see the next image and would be able to click on the bullet icon and move to the next image. If there are more than five images in the picture library, the bullet style is removed automatically. There are three options available. None is the default value with no slider bullets style. Slider Bullets Style Display Circle Square None

39 4) Slider Effect This option is to decide on the transition or animation effect of how the next image pops into the image slider. There are three options available. Default value is Slide. Slider Bullets Style Display Description Fade Current Image gradually grow faint and then merge with the next image. Slide Image move smoothly while maintaining continues contact with it. Changing the next image immediately Switch

40 5) Slider Duration (in seconds) This is to specify the duration time for changing current image to the next image. The default interval between image display would be 10 Seconds. The interval is calculated only in seconds Video configuration Video has same properties (URL, Display-in) as Link configuration. But instead of a link the user should select the location of the video in the property URL. The user could select the video within the site collection or can copy and paste any video references from outside (Company Intranet, Internet etc.). Permission should also be checked by Administrators when providing the URL outside the site collection. All.mp4 format and YouTube videos are supported. 1) Click on the Select URL button. Select one video from any of the libraries. 2) Select Modal Window in Display in property. 3) Enter the desired Width and Height. Note: In Display-in property the New Window option is not available for Video.

41 Display of the Metro Navigation web part after Video Configuration is updated Click on the metro tile to view the modal window with video. Sample YouTube Video display

42 Announcement configuration The announcement configuration helps to post the information in the Announcement template list. The list item in the list will be continuously rolling up (ex: News Ticker or Scroller) in the metro tile. 1. Create a List using Announcement List Template. Select the Site Contents in the Left Navigation Menu. 2. Select the add an app under Lists, Libraries, and other Apps

43 3. Click on the Announcement tile in the App you can add section. 4. A modal window will appear. Enter Announcements in the Name textbox and click on Create button.

44 5. The List will be created and then it will be redirected to the Site Contents. Click on the newly created list. 6. Click on new Announcement to create new item.

45 7. Enter the needed details in the Title and Body and then click on Save button. 8. Enter few additional list items.

46 9. List Name: Go back to Metro Navigation list item and select Announcements in the List Name. 10. View Name: Select All items in the View Name. If not selected, the default view in the list will be selected. Display of the Metro Navigation web part after Announcement Configuration is updated Empty configuration This option is to leave empty space between two tiles. 1. Change the current item (Title: News ) property Position value to 3 and save it.

47 2. Add a new list item following the steps above. Provide the Position textbox value as 2. For this scenario the list item is saved with information as below Title : Empty Position : 2 Metro Type : Empty Display of the Metro Navigation web part after Empty Configuration is updated Default View The List by default contains a default view named as All Items. 1. Select the Site Contents in the Left Navigation Menu.

48 2. Click on the Metro Navigation list created under List Libraries and Other Apps. 3. The user will be able to see the Default view. The ordering of columns is pre-defined in the view and this could be changed anytime. There are few additional columns added for the ease of end user. a. Edit: To edit a List item b. Image Preview: To preview the Image/ Icon URL. c. Created & Modified Details (User and Time)

49 3.1.3 View List Item 1. Click on the Title value in the list item. (or) Click on button. A menu will popup. Click on View Item.

50 2. The user will be redirected to the List Item view page. 3. Close button will redirect to the Default list view page.

51 3.1.4 Update List Item 1. Click on the Edit icon near the list item in the default view. (or) Click on the Edit Item button available in the View Item page. (or) Click on button. A menu will popup. Click on Edit Item.

52 2. All other process is same as updating the values in the Add List Item. Update the required information and click on Save button. Note: The created and last modified details are available at the end of the page.

53 3.1.5 Delete List Item 1. Delete item option is available in three places a. From View i. Click on button. A menu will popup. Click on Delete Item. b. From View Item page i. Click on Delete button in the SharePoint ribbon.

54 c. From Edit Item page i. Click on Delete button in the SharePoint ribbon. 2. A confirmation window will appear. Click OK button. This will delete the item from the List. 3. Cancel button will close the confirmation window.

55 3.2 Metro Navigation Webpart Properties The metro navigation web part has custom properties under the group AURUM Metro Navigation and this is used to set various configurations in the web part Edit Web Part 1) Go to the page where the metro navigation web part is added. Click on the Page tab in the SharePoint ribbon. 2) Click on the Edit button.

56 3) Move the mouse over the upper right corner of the Metro Navigation Web Part which needs to be edited and click on the dropdown arrow. 4) Click on Edit Web Part

57 5) In the right-hand side the web part properties will appear. There are two custom properties group. a) AURUM Metro Navigation: To set the properties for the Metro navigation tiles and app part. b) Metro Navigation Modal: To set the properties of the frame section of the app part. Click Ok to save the changes and close the web part properties window. Click Cancel to discard the changes and close the web part properties window. Click Apply to save the changes.

58 6) Click on Save button in Format Text tab of SharePoint ribbon, to save the changes and close the page editing.

59 3.2.2 AURUM Metro Navigation Properties AURUM Metro navigation web part properties helps to apply different styles for the metro app part. 1) List Name The List Name property contains the name of the list from which the metro navigation web part has generated the tiles structure. By default, the list name is updated when the metro navigation app is initialized. 2) View Name The View Name property contains the name of the List View available in the above selected metro navigation list. View name is also updated when the metro navigation web part is initialized. View name can be manually updated, but the names should be typed in correctly. 3) Tile Size The default tile size is 150px (150 x 150). The user will be able to change all the tiles default size here. Enter 200 in the Tile Size textbox.

60 Display of the Metro Navigation web part after Tile Size is updated The tile size is now updated to 200px. For the next 5 steps, change the List item Metro Type to Announcements (See Announcement configuration) 4) News header font family This option is to change the font family of the news header. Default font family is Verdana. Enter Arial in the News header font family textbox.

61 Display of the Metro Navigation web part after News header font family is updated 5) News header font size This option is to change the default font size of the news header. Default font size is 10. Enter 14 in the News header font size textbox. Display of the Metro Navigation web part after News header font size is updated 6) News Header font color This option is to change the default font color of the news header. Default font color is Blue. Enter Green in the News Header font color textbox. Hex color codes (ex. #008000) are supported here.

62 Display of the Metro Navigation web part after News Header font color is updated 7) News content font family This option is to change the font family of the news header. Default font family is Verdana. Enter Arial in the News content font family textbox. Display of the Metro Navigation web part after News content font family is updated 8) News content font size This option is to change the default font size of the news body content. Default font size is 10.

63 Enter 12 in the News content font size textbox. Display of the Metro Navigation web part after News content font size is updated 9) News content font color This option is to change the default font color of the news body content. Default font color is Black. Enter Blue in the News content font color textbox. Hex color codes (ex. #0000FF) are supported here. Display of the Metro Navigation web part after News content font color is updated

64 10) Custom CSS Custom styles with CSS tags are supported in Metro Navigation. The style tags should to be added in the Custom CSS textbox. Note: Existing styles will be overridden with the Custom styles. For more information, please contact 11) Number of Columns This option is to change the number of tiles present in a single row. Default number of tiles in a row will be 4. Enter 1 in the Count of Columns textbox

65 Display of the Metro Navigation web part after Tile Font Name is updated 12) Tile Font Name This option is to change the font name of the metro tiles text. Default font name is Verdana. Enter Arial in the Tile Font Name textbox.

66 Display of the Metro Navigation web part after Tile Font Name is updated The font name is now changed to Arial. Check the change in title text in the tile. 13) Tile Font Size This option is to change the default font size of the metro tiles text. Default font size is 10. Enter 20 in the Tile Font Size textbox. Display of the Metro Navigation web part after Tile Font Size is updated

67 14) Metro Background Color This option is to change the background color of the metro web part. Default color is Transparent. Enter Gold in the text box. Hex color codes (ex. #FFDF00) are supported here. Display of the Metro Navigation web part after Metro Background Color is updated

68 3.2.3 Metro Navigation Modal Properties 1) APP Minimum Width APP To set the minimum width of the outer frame of the metro navigation web part. Default width is. Enter 1000 in the textbox. 2) Minimum Height APP To set the minimum width of the outer frame of the metro navigation web part. Default width is. Enter 800 in the textbox. 3) Modal Property This property if enabled will open the dialog in Full screen.

69 4. Overall Demo Page

70 5. Contacts Mr. Yaylak is available to you with pleasure for your concerns. Questions to the product Require further information Price information Quoting Tel: Website: