AMREIN ENGINEERING SharePoint Web Parts   |   Office 365 Web Parts   |   Blog   |   Support   |   Search   |   About us   |   Home  
  Products Hero Sharepoint Web Part


Sharepoint Web Parts  

2019 Modern Web Parts  

Digital Clock Webpart  

Alerts Webpart  

Sitemap Webpart  

Stock Chart Webpart  

Stock Quotes Webpart  

Dilbert Webpart  

Mega Menu Webpart  

Quote of the Day Webpart  

Webpart Tabs Webpart  

"Spotlight On.." Webpart  

"Tip of the Day" Webpart  

Lightbox Webpart  

Tabs & Accordion Webpart  

Weather Webpart  

Slideshow Webpart  

Currency Rates Webpart  

Media Player Webpart  

YouTube Player Webpart  

Map Chart Webpart  

Org Chart Webpart  

Tiles Webpart  

Chart Webpart  

Google Chart Webpart  

Hero Webpart  

News Tiles Webpart  

Cafeteria Webpart  

RSS Feed Ticker Webpart  

SQL Viewer Webpart  

Google Map Webpart  

Quick Poll Webpart  

Quick Survey Webpart  

Audio Player Webpart  

Geo Mapper Webpart  

SQL Chart Webpart  

Exchange Calendar Webpart  

Exchange Events Webpart  

Call to Action Webpart  

Quick Links Webpart  

Filter Webpart  

Image Rotator Webpart  

Navigator Webpart  

KPI Webpart  

Page Hits Webpart  

Picture Menu Webpart  

Timer Webpart  

Podcast Webpart  

SQL Bullet Graph Webpart  

User Spotlight Webpart  

List View Webpart  

Staff Directory Webpart  

Birthday Reminder Webpart  

News Carousel Webpart  

Team Members Webpart  

Classifieds Webpart  

Image Menu Carousel Webpart  

Timeline Webpart  

Banner Rotator Webpart  

AZ Index Webpart  

Blog Roll Up Webpart  

Discussion Roll Up Webpart  

Document Roll Up Webpart  

News Roll Up Webpart  

Task Roll Up Webpart  

Calendar Roll Up Webpart  

Quick Form Webpart  

Twitter Webpart  

Upcoming Events Webpart  

Welcome Webpart  

Color Calendar Webpart  

Image Carousel Webpart  

Metro Grid Webpart  

Goal Thermometer Webpart  

Swipe Gallery Webpart  

List Items Webpart  

List Rotator Webpart  

List Search Webpart  

Bullet Graph Webpart  

Accordion & Tabs Bundle  

Accordion List Webpart  

Tabs List Webpart  

Microblog/Chat Webpart  

Toast Notifications  

Vacation Planner Webpart  

Multilevel Tile Webpart  

Inspired Tiles Webpart  

Facebook Timeline Webpart  

File Explorer Webpart  

Zip Creator  

Web Part Bundle  

Web Parts by Category  

Microsoft Sharepoint Web Parts

Hero SharePoint Web Part




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 and Sharepoint 2019 (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 or color

SharePoint 2019 'Modern' version »

Product Price
Hero Web Part for SP 2010
30 day Evaluation Version
Free download..
Hero Web Part for SP 2013
30 day Evaluation Version
Free download..
Hero Web Part for SP 2016
30 day Evaluation Version
Free download..
Hero Web Part for SP 2019
30 day Evaluation Version
Free download..
Hero Web Part License Key
per WFE Server License
USD 150.00
Web Part Installation Instructions download..
Deployment Instructions for SP 2019 "modern" pages download..
You can also send a PO to info@amrein.com 

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.



 
© 2021 AMREIN ENGINEERING AG
  RSS Feed   
These webparts works well and are easy to configure. We are using the Survey webpart and also the Stock Quotes on our intranet.

Lise Rasmussen, Polarcus Dubai


This web part is available for:
SharePoint 2010
SharePoint 2013
SharePoint 2016
SharePoint 2019
SharePoint 2019 'modern'
Office 365