Microsoft Sharepoint Web Parts

Hero SharePoint Web Part

Mars Conference March 15 - March 18 The Hero Web Part adds a compelling design element to your page. You can display up to five items and use images, color, text, and links to draw attention to each. The Web Part can be used with Sharepoint 2010, Sharepoint 2013, Sharepoint 2016, Sharepoint 2019 and Subscription Edition (both classic and modern pages). The following parameters can be configured: Number of Tiles (up to 5) Height of the web part optional URL links for each tile optional "Action Text" Caption optionally set the page background image, video or color SharePoint 2019/SE 'Modern' version » Product Price Hero Web Part for SP 2010 30 day Evaluation Version Free Hero Web Part for SP 2013 30 day Evaluation Version Free Hero Web Part for SP 2016 30 day Evaluation Version Free Hero Web Part for SP 2019 and SE 30 day Evaluation Version Free Hero Web Part License Key per WFE Server License USD 150.00 Web Part Installation Instructions Deployment Instructions for SP 2019 and SE "modern" pages You can also send a PO to [email protected]

Installation Instructions:

1. download the Web Part Installation Instructions (PDF file, see above) 
   
2. deploy the feature to your server/farm as described in the instructions.
   
3. Navigate to a page where you would like to place the webpart and choose "Site Actions/Edit Page"
4. Add the web part to the appropriate zone. The web part is listed in the "Amrein Engineering" web part gallery section
5. Configure the following Web Part properties in the Web Part "Miscellaneous" pane section as needed:

Page Backdrop: enter the optional URL of an image or the color to be applied to the current page. Examples: ×       ×      × Quick Launch Area: either disable or enable the Sharepoint Quick Launch menu on the current page. Hero Height: enter the height of the web part in pixels (default:300px) Tile Gap: enter the gap between tiles in pixels (default:3px). Set to "0" to not use any gap. Show Tile Hover Effect: either enable or disable the tile hover effect. Enable Tile editing: displays the "Add new tile" button during the design process (visible to authors only). Options: enter further options as needed (see separate documentation). License Key: enter your Product License Key (as supplied after purchase of the "Hero Web Part" license key). Leave this field empty if you are using the free 30 day evaluation version.

You now can proceed to add up to 5 tiles by clickîng the "Add new Tile" button. Existing tiles can be edited by clicking the red button in the lower left corner of each tile: Title: enter the title of the tile. You can optionally place the title into a colored box by appending "/box=colorvalue" to the title. Example: /box=Dodgerblue You can optionally use the below placeholders to display the time of day, first name and/or last name of the current user. Example: Good {timeofday} {firstname} ! Background: either enter the tile background color or the URL of a background image. Enter "attachment" if you want to add the background image as an attachment. You also can enter the URL of an MP4 video file to play the video as a tile backdrop. Optionally append /center to center the backdrop image within the tile area. Enter color values in one of the below formats: HTML color name (as eg. "orange", "red", "tomato", "transparent") RGB hex color values (as eg. "#FFCC00", "#9cc" URL: enter the optional tile URL. Sort Order: enter the ordinal number dictating the sort order (in case you need to re-position the tile) Target: choose the target if the tile is linked to some content: In Place (opens the link in the same browser window) New Tab (opens the link in a new browser tab) Dialog (opens the link in a Sharepoint dialog window Action Text: either the optional Action Text to be displayed in the tile. CSS: enter optional additional CSS styles. Example: font:21px Segoe UI Light;padding:20px;top:0

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
jackie mcdonough   11/29/2018 02:58  Unable to download install instructions Juerg   11/29/2018 12:43  Jackie, the broken link has now been fixed. Tyler   12/3/2018 15:28  Hi Juerg, Trying this one out as a trial--so far its great... just can't figure out how to set the size for each tile manually? It seems to set its own size regardless of the attachment image size. Thanks ahead of time for your time and assistance! Juerg   12/3/2018 17:05  Tyler, the web part is designed to - take up 100% of the available page or zone width - manage the size of the tiles depending on the number of tiles added It this is designed to quickly create a suitable tile layout without having to take care of the individual tile sizes. If you need to control the size of each tile individually, please have a look at the “Tiles” web part (see /apps/page.asp?Q=5902) Walter   2/13/2019 09:03  Hi, Tile error "Hero List error: Object reference not set to an instance of an object", when keyuser left Title-field blanco. Is there an easier workaround to fix that issue than saving all links, deleting the webpart and creating it again? Thx Juerg   2/13/2019 09:56  Walter, how did you manage to leave the „Title“ field empty (it is a mandatory field) ? You can navigate to your top site in the site collection, click “Site Contents” and the select the “AEHero” Sharepoint list which contains a entry for each tile. Please then edit the offending list item and then also make sure to make the "Title" list column "required". Bill Dewey   3/18/2019 16:20  The first user we have who added the Hero web part got an "Access Denied" immediately after. Looking at this page, I could see that the issue was the creation of the Hero's list. This user has access to the subsite level, not the top level, so the list could not be created. The problem for us is that most users only have access to their own subsites. Is there a way to have the Hero's list created at the subsite level? As it is it appears that this list will be same across the entire site collection, which won't work for us. Juerg   3/18/2019 17:21  Bill, we have now added the option to specify a local „AEHero“ list (eg. local to the current site). Please re-download the web part and then update the solution and then add the below appSetting to your Sharepoint application’s web.config file: <add key="AEHR_UseLocalList" value="1" /> (in the last <appSettings> section right after the “<system.net> section) When using this option, the web part will create the list in the same site where the web part is placed. Matthew   5/16/2019 16:06  We're limited pretty severely in where we can use this otherwise excellent web part due to it not being responsive to be viewed on mobile phone size displays. Most site now need to be responsive and "mobile first" so I hope this can be taken as a change request and something that can be implemented for this web part. Currently, the tiles squish horizontally enough to be unusable on a phone display. They should display vertically instead in this case. thank you! Juerg   5/16/2019 17:50  Matthew, the tiles indeed get narrower as the screen width gets smaller. This is due to the fact that the tile width is set as a percentage. We thus added the new "minwidth" option (to be added to the web part's "Options" setting) which assigns a fixed minimum width to the first tile as eg. minwidth=700 Since the tile now has an explicit minimum width, the tile(s) to the right will now wrap below the main tile when viewed on small displays. Please re-download the web part and then update the solution. Matthew   5/21/2019 17:26  The minwidth doesn't quite fix this. It disrupts the display on desktop displays by not filling the width of the web part very well or consistently, and on mobile displays, the non-main tiles still get squished into one row. Juerg   5/28/2019 11:41  Matthew, we have now added better support for mobile devices. The main tile now always occupies 100% of the available width and the other tiles occupy 50% on mobile devices. Please re-download the web part and then update the solution. Please then also remove the "minwidth" web part options which is not needed anymore. Matthew   7/23/2019 14:47  Thanks - it is a bit better on mobile now. If you'd like to work on improving this further by working together on it, please let me know. Matthew   10/10/2019 23:05  The latest release looks great on mobile - thanks! Ellen   3/6/2020 20:07  What is the font for this web part? I'd like to use it in other places on the site, but I kind of suck at fonts. Juerg   3/9/2020 10:45  Ellen, the web part uses the below standard font (also used by Sharepoint in other places): Segoe UI Semilight Travis   9/1/2020 20:11  Nice work guys. Glad I found your site. Only thing that would make it better would be a responsive hover action like the SharePoint online version has. Everything else is great, love the included options. I literally googled SharePoint 2013 Hero WebPart and found this and was pretty happy. Thanks! Juerg   9/2/2020 11:57  Travis, you actually can apply a hover effect by adding some related CSS to the web part via the web part’s “Options” setting as for example: css=.AETile {transition:opacity 0.2s ease-in-out} .AETile:hover {opacity:0.8} Melanie Ryan   10/28/2020 23:04  I'm trying to find the separate documentation on options. From above "enter further options as needed (see separate documentation)" I'm trying to change the font size and location of the title text and the action text. Juerg   10/29/2020 11:04  Melanie, you can change the font size of the title text by editing the tile and entering the desired CSS style(s) into the tile’s “CSS” setting as eg. font-size:44px;left:200px;bottom:50px You can move the text box via the “left”, “top”, “bottom” and “right” CSS styles. To change the font size of the “Action” text, please add the below to the web part’s “Options” setting: css=.AEHR {font-size:15px !important} Travis   10/30/2020 17:34  Hello! I'm trying to combine the CSS options you gave me with text style options you gave Melanie and I can't seem to get them to work. To change the Title text you say edit the tile and entering options into the Tile's "CSS" settings however I don't see any CSS settings on each Tile's list form? I've been experimenting with both Tile options and WebPart options and can't get anything I try to work. I really just want Bold title text. Please advise. Juerg   10/30/2020 19:04  Travis, this column has only recently been added. Please thus re-download the web part and then update the solution. You then also will need to add the new “CSS” list column (of type “single line of text”) to the “AEHero” list locate in the top site of the site collection. Spadmin   9/30/2021 07:31  Hello, how can I change the position of the picture in the background? I've added it as attachment, but I'd like to move it a little bit upwards. Thanks! BR Juerg   9/30/2021 16:12  Spadmin, to change the image focus, please append the "/focus" parameter to the tile's „Background“ settingas shown by the below example: attachment/focus=0px -150px the first value shifts the image left or right and the second value shifts it up or down. Ira   1/17/2024 18:40  I am getting an error on adding it to a wiki page in a Team Site. Is there any code to add to the web.config? I get this error: A Web Part or Web Form Control on this Page cannot be displayed or imported. The type AEHeroWebpart.AEHero, AEHeroWebpart, Version=1.0.0.0, Culture=neutral, PublicKeyToken=79062cc9e0a56262 could not be found or it is not registered as safe. Ira   1/18/2024 10:39  The above was not an actual error. The webpart was not deployed to the web application in question. Resolved. Natasha Gondi   3/20/2024 15:37  Hi, I was looking to make the text bold, add some padding of the first tile text only but it is getting applied to all the tiles text, I saw that all the tiles share same text id and classes in css. Is there any way I can do css changes only to the first tile? any help is greatly appreciated! Juerg   3/20/2024 17:17  Natasha, to just style the text (below the tile title) of the first tile, plese enter the below into the web part's "Options" setting: css=.AETile1 .AEHR {font-weight:bold !important;padding:10px} Natasha Gondi   3/21/2024 02:45  Hi Juerg, css=.AETile1.AEHR {font-weight:bold !important;padding:10px} is not working. I copy pasted this exact code in the webpart's options settings. kindly help! Natasha Gondi   3/21/2024 03:36  Hi Juerg, If I add "font:35px bold;padding:40px;top:0" in the css column of the first tile, it works but I want it to automatically happen for first tile everytime. how can I do this for first tile always even when the items are deleted and added new ones. css=.AETile1 .AEHR {font-weight:bold !important;padding:10px} --> this one you asked to add on the webpart's options settings is not working, I copy pasted it exactly. Kindly help, Thank you so much! Juerg   3/21/2024 11:12  Natasha,  as said, to just style the "Action" text (below the tile title) of the first tile, please enter the below into the web part's "Options" setting:  css=.AETile1 .AEHR{font-weight:bold !important;padding:10px} Please make sure to have a blank character between ".AETile1" and ".AEHR" Natasha Gondi   3/21/2024 15:56  Hi Juerg, Thank you it worked, I was missing the space so it was throwing an error. One more thing, I put in the below in the options of the webpart and padding is not working, only font size and bold is working. Am i doing anything wrong ? css=.AETile1 .AETItext{font-weight:bold !important;font-size:30px !important;padding:50px} This one is for Title Title text and not for Action Text. Also question -- Can we have multiple CSS in the Options settings of the webpart ? if yes, do we just have to enter in different lines thats all ? Thank you so much for the help! Juerg   3/21/2024 16:34  Natasha, please use the "!important" qualifier to override the default settings: css=.AETile1 .AEHR {font-weight:bold !important;padding:10px} .AETile1 .AETItext{font-weight:bold !important;font-size:30px !important;padding:50px !important} The above example also shows how to define multiple CSS styles. Natasha Gondi   4/15/2024 19:16  Hu Juerg, Is there a way to lock in the ratios of the title sizes in the tile boxes because when my chrome window is put smaller the title font size doesn’t change in relation to the box so it overcrowds it. Thank you! Juerg   4/16/2024 11:38  Natasha, please enter your font-size into the tile's "CSS" setting using the "vw" units as eg. font-size:3vw This makes the title text responsive, eg. it shrinks when the browser window is being reduced. Natasha Gondi   4/16/2024 18:27  Hi Juerg, What is the "vw" equivalent to "px" ? Currently the font size of the title is "17px", if I make it "17vw" its becoming too big, even if i make it "3vw" its still little bigger. Just wanted to know if you have any comparison formula, or should I just do trial and error to find out the exact one ? Thank you so much for the help! Juerg   4/17/2024 11:45  Natasha, Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm. Since this unit is dependent on the monitor and the window size, you need to experiment in order to find the proper font size. Please note that you can use fractional values as eg 1.75vw. Natasha Gondi   4/21/2024 19:56  Hi Juerg, Is there any way to limit the number of items on the Webpart ? If I do this change in the All items view, its not reflecting. I want to limit the webpart to only 5 tiles, behind the scenes just latest 5 items in the "All items" view. Thank you so much for the help. Juerg   4/22/2024 11:50  Natasha, are you sure to mean the "Hero" web part since this web part is not related to any SharePoint list ? Natasha Gondi   4/22/2024 13:24  Hi Juerg, Yes I am talking about HERO webpart, behind the scenes AEHero list we have (AEHero list gets created behing in site contents when we install the HERO webpart), in the "All items" view I tried to set the item limit to 5 which is not working. I want to webpart to have only 5 items, how do I set that ? Thank you so much. Natasha Gondi   4/22/2024 13:25  Juerg, I mean i want the webpart to have only 5 tiles. Thanks. Juerg   4/22/2024 14:55  Natasha, the web part automatically limits the number of tiles to 5, so there is no need to restrict the "AEHero" list. Please also note that the "AEHero" list takes track of all the Hero web parts across the current site collection. Natasha Gondi   4/22/2024 16:14  Hi Juerg, No its not limiting to 5, when we create the 6th item in the AEHero list, the webpart is having 6th, we tried creating 10 items and the webpart has 10 tiles, needing for a long scroll down. we want to avoid scrolling down and limit the webpart to have just 5 tiles and AEHero list to have only 5 items, the top 5 recently created ones. I tried setting the item limit to 5 in the "All items" view of AEHero list but thats not working, still showing up all items. Thank you for the help. Juerg   4/22/2024 17:11  Natasha, we have now set a limit of 5 items per web part instance (in case you are adding new tiles directly to the AEHero list as opposed to via the web part's "Add new tile" user interface). Please thus re-download the web part and then update the farm solution.