Microsoft Sharepoint Web Parts

Quick Links SharePoint Web Part

The Quick Links Web Part allows to easily set up a menu with icons based on a Sharepoint List. The Web Part can be used with Sharepoint 2010, Sharepoint 2013, Sharepoint 2016, Sharepoint 2019 and SharePoint Subscription Edition (both "classic" and "modern" pages). The Quick Links Web Part lets you: use a Sharepoint Links List or a Promoted Links list to define the menu items choose a horizontal, vertical or a fixed or fluid grid layout with or without icons define the menu tile width, height and color use Font Awesome icons and/or Microsoft Office Fabric icons CSS styles to customize the look and feel apply Security trimming by Sharepoint groups or AD groups define personal link menus (each user can configure his/her own menu) Office 365 version »  SharePoint 2019/SE 'Modern' version » Product Price      Quick Links Web Part for SP 2010 30 Day Evaluation Version  Free Quick Links Web Part for SP 2013 30 Day Evaluation Version  Free Quick Links Web Part for SP 2016 30 Day Evaluation Version  Free Quick Links Web Part for SP 2019 and SE 30 Day Evaluation Version  Free Quick Links Web Part License Key per Server License  USD 125.00 Installation Instructions Installation Instructions for SP 2019 and "modern" pages

Installation Instructions: download the Quick Links Web Part Installation Instructions (PDF file, see above)  either install the web part manually or deploy the feature to your server/farm as described in the instructions. configure the following Web Part properties in the Web Part Editor "Miscellaneous" pane section as needed: Site Name: Enter the name of the site that contains the Sharepoint List: - leave this field empty if the List is in the current site (eg. the Web Part is placed in the same site) - enter a "/" character if the List is contained in the top site - enter a path if the List is in a subsite of the current site (eg. in the form of "current site/subsite") List Name: Enter the desired Sharepoint List name containing the definition of the links. We recommend to use the Sharepont "Links" list template or a "Promoted Links" list as the basis for the list.   Please note that the optional menu icons should be defined in a List column named "Icon". To security trim the links, please add a column named "Group" (of type "Person or Group") To add individual colors to each menu entry, please add a column named "Color" (enter the color values either as #rrggbb values or HTML color names) To define the link target, please add a column named "Target" (of type "Choice") using the below 3 choices: - same window - new window - popup window The user can then edit the menu tile (if "Show Add Link Button" is checked) by pointing the cursor to the lower left corner of the menu tile to open the edit dialog popup: To enter a "Font Awesome" icon, enter the icon name using the "fa-" prefix as eg. fa-home The collection of available icons can be found here. To enter a "Microsoft Office Fabric" icon, enter the icon name using the "ms-" prefix as eg. ms-People The collection of available icons can be found here. To display the "Favicon" icon assigned to the URL of the targeted web site, enter "favicon" as eg. favicon View Name: Optionally enter the desired List View of the list specified above. A List View allows you to specify specific data filtering and sorting. You will also need to include the "Title" and "URL" columns if you are displaying these fields (see below). Leave this field empty if you want to use the List default view. Tile Width: define the menu tile width in pixels (default=100) Tile Height: define the menu tile height in pixels (default=100) Tile Gap: define the gap between menu tiles in pixels (default=8) Number of Columns: restrict the (fluid) menu layout to the specified number of columns (set to "0" to specify a fully responsive layout) Menu Item CSS Style: define the menu tile CSS styles as eg. the font color, font size and default background color. Example: font-size:12px;color:white Icon Layout: choose one of the below options: - none (do not display the icons) - Center - Icon Only - Left - Left Centered Open Link in new window: check this field if you want the links to be opened in a new browser tab/window. Show my Links only: optionally only displays the links created by the current user. Show 'Add New Link' Button: optionally displays a button at the bottom to allow users to add new entries (the button is only visible of the current user has List "Contribute" permission). License Key: enter your Product License Key (as supplied after purchase of the Quick Links Web Part license). Leave this field empty if you are using the evaluation version.

Please enter a comment below if you have problems with the installation, want to give feedback or have suggestions for improvements:

User Comments	Post a Comment
Nate   12/2/2019 23:04  Can you post the details on the list that runs this web part? Juerg   12/3/2019 10:55  Nate, you can start off with a simple „Links“ list (eg. a list based on the Sharepoint “Links” list template. You then might want to add one or more of the below additional list columns: Icon (of type “single line of text” to assign icons to the link tiles) Group (of type “Person or Group” to security trim the links) Color (of type “single line of text” or “choice” to assign individual colors to the tiles) Target (of type „choice” to define the link’s behavior when clicking it) Example: Roland   1/23/2020 18:06  Is it possible to add own icons (with the url to it)? Juerg   1/27/2020 12:03  Roland, we have now added support for custom icons via the list's "Icon" field with version 1.0.6 The "Icon" field can either be of type "Hyperlink or Picture" or "Single line of text". Please re-download the web part and then update the solution. Danny   2/28/2020 13:19  Hi Is there a way of using an lists title column instead of the url? Juerg   2/28/2020 16:37  Danny, did you enter the URL into the list's "Title" column ? Sulip   4/9/2020 08:03  Hi I tried changing the Menu Item CSS Style to font-size:10px;color:blue but it did not change it. I must be doing something wrong. Juerg   4/9/2020 11:15  Sulip, could it be that you apply a custom Sharepoint CSS style sheet via your Master page where you set the "p" (paragraph) to a fixed font size ? If yes, please apply the Quick Links CSS via the web part's "Options" setting as illustrated below: css=.AEQLurl {font-size:10px !important;color:blue !important} Ellen Teal   6/29/2020 19:26  I'm looking to see if there is a way to display the notes within the "button" area but below the URL text? Juerg   6/30/2020 12:11  Ellen, we have now added the new "shownotes" option (to be added to the web part's "Options" setting): shownotes=1 which displays the content of the "Notes" field within the tile (as opposed to just as a tooltip): Please re-download the web part and then update the solution. tim   9/7/2020 14:58  i TRIED TO INSTALL THIS WP on a modern site in sharepoint 2019 in-prem. I was able to install it in app catalog with no errors and aslo successfully added it to the modern page. But when i try to configure it, it says webpart not found in webpart gallery..Would highly apppreciate your help. Juerg   9/7/2020 15:23  Tim, did you also install the web part in your farm (which is a necessary prerequisite) ? tim   9/8/2020 11:14  thanks for a quick response...We are installing the sppkg package via the app catalog on a sp2019, on-prem. and that too on a modern site. so cannot install wsp. i was able to deploy the sqlviewer wp but when i try the quicklinks wp, it doesnt appear in the site collection features and hence connot configure as it cannt find it when i put the wp name. is it meant to only work on sponline and not on-prem. Juerg   9/8/2020 11:50  Tim, please note that the sppkg package implements a "modern" (SPFx) web part that acts as a "proxy" to the on-premise farm based web part. You thus will also need to install the farm version (even if you only intend to use the web part on "modern" pages). Felix   12/16/2020 14:18  Hi there, would it be possible to integrate a filter into the web part that displays the texts of the web part depending on the browser language? Otherwise, if necessary, a language switch in the Web Part itself. That would be great and help us enormously Br. Felix Juerg   12/16/2020 15:06  Felix, we have now added support for multiple languages, so please re-download the web part and then update the solution. For each additional language to be supported please add a new list column named "Title_xx-YY" where "xx-YY" is the locale of your browser language as eg: de-DE for German en-US for English and then fill the new column(s) as needed. Andreas   2/10/2021 14:30  Hi, ist it possibe to inject some JSCript-Code (onclick) instead of just open window/modal dialog? Juerg   2/10/2021 16:35  Andreas, this is currently not possible. Would this be an important feature for you ? Andi   2/11/2021 06:55  Hi Juerg thank your for the quick response. Our intranet startpage is based on the link webpart. Now we have some requirements where this feature would help us a lot. More control over the properties/option (widt/height/autosize/allow maxmize ...) of the sharepoint modal dialog could also help a lot. Kr Andreas Juerg   2/12/2021 12:52  Andi, you can control the size of the dialog window using the below setting (to be added to the web part's "Options" setting): popupwidth=900|popupheight=500 We will add the "allow maximize" option to the web part's next release. Regarding the custom JavaScript code: would you want to control the links with your code (eg. overriding the Sharepoint dialog code that is currently used) ? Felix   2/17/2021 09:16  Hello everyone, unfortunately I have a new request. do you think it would be possible to call the webpart via URL parameter? Example: https://www.sharepoint/xx/zz/SitePages/net.aspx?en-US -- for English https://www.sharepoint/xx/zz/SitePages/net.aspx?de-DE -- for German Br. Felix Juerg   2/17/2021 11:14  Felix, the web part now supports the "locale" URL parameter to let you choose the language as for example: https://www.sharepoint/xx/zz/SitePages/net.aspx?locale=de-DE Please re-download the web part and then update the solution. Felix   2/17/2021 13:35  Hi Jürgen, wow, I'm thrilled - that was super quick. Thumbs up! Br. Felix Aleš   5/6/2021 11:43  Hi, is there a way to tell the web part that certain tiles are in fact just head icons (title tiles) and are not in the function of a link. Since URL column is mandatory and expecting entry. SP used to have (in most web parts) # char to tel there is no URL in case of title links for lists or libraries. Juerg   5/6/2021 13:32  Ales, since Sharepoint does not allow to enter an empty link into the “URL” field of a “Links” list, we have have now added support for the below link to indicate that the list item is not linked (eg. just used as a section header): http://void Please re-download the „Quick Links“ web part and then update the solution. Andreas   5/23/2022 06:29  Hi, the webpart needs access to sharepointonline.com Some parts of our company use some group logins, without any permissions to access the internet therefore the icons are not visible to the users. Is it possible to use webpart offline as well? Bye Andi Juerg   5/23/2022 10:37  Andreas, you can configure the web part to use a local copy of the Microsoft Office Fabric font: download the fabric-local.zip file from /download/fabric-local.zip, extract the 2 files and place them on the Sharepoint web frontend server(s) at c:\Program Files\Common Files\microsoft shared\Web Server Extensions\16\TEMPLATE\IMAGES\AEQuickLinksWebpart add the below option to the web part's "Options" setting: officefabric=local Kay   8/31/2022 21:19  Hello - in the sample displays, there are some custom options including rounded corners, borders on the tiles, etc. How are those applied? Can you please provide a sample code to customize the tiles? thanks! Juerg   9/1/2022 12:29  Kay, to add a border and/or rounded corners to the links, please use the web part’s “Menu Item CSS Style” setting to enter the corresponding CSS style as eg: border:1px solid #0d6797; and to add rounded corners: border-bottom-right-radius: 12px;border-top-left-radius:12px; Raphael Costa   9/27/2022 17:32  Can I use it with target audiences? Juerg   9/28/2022 11:44  Raphael, you actually can add security trimming to each link by adding a new column named “Group” (of type “Person or Group”) to the list. Kelly   11/8/2023 22:00  Hi Juerg I want to create the background as an Image. I was successful if I used the Promoted Links list template but making any edits to "Menu Item CSS Style" didn't apply. I tried then to use the Links list template but couldn't work out how to input the image URL - tried a few things but no luck. Any suggestions? Thanks Kelly Juerg   11/9/2023 16:35  Kelly, you currently only can have background images when using the “Promoted Links” list template. Would it be important for you to be able to use a list based on the “Links” template ? Kelly   11/9/2023 23:16  Juerg, I dont mind using the Promoted Links list but my issue was that any CSS that is added to the "Menu Item CSS Style" doesn't reflect in the Wepbart. Is this possible or will I need to add separate CSS in a Script Editor Webpart? Kelly   11/9/2023 23:50  ...also wondering if it is possible to centre the tiles if they don't fit the width of the page? For example, I only have two tiles on one page and they align left with a lot of white space on the right. Juerg   11/10/2023 12:16  Kelly, to which element exactly would you want to apply your CSS ? You can center the tiles by adding the below to the web part’s “Options” setting: css=.AEQuickLinks {width:480px;margin:0 auto} where the above width of 480px needs to be adjusted by entering the value 160xNbr. of tiles per row (3 in the above example). Kelly   11/11/2023 05:46  Thanks Juerg - I worked out the Centering of the tiles. In relation to the font, I just wanted to make the information that comes from the "Title" column in Promoted Links bigger for example. Adding "font-size..." to the "Menu Item CSS Style" doesn't affect it. Juerg   11/13/2023 11:34  Kelly, to make the font larger, please add the below to the web part’s “Options” setting: css=.AEQLpromo {font-size:15px !important;padding-top:5px !important} Kelly   11/16/2023 07:07  Thanks Juerg - that did the trick