Still working out the details.
- Michael
Sunday, June 24, 2018
Wednesday, February 7, 2018
Access Reference Fields in SXA Rendering Variant
In this article I demonstrate how to create an NVelocity tool to access properties from a Sitecore ReferenceField.
As a followup to my post on building a custom tool in SXA, I wanted to share a new discovery which makes greater use of NVelocity.
If you have used Rendering Variants in SXA you may have come across the token $item. With this token you are able to access data on the page item. Rather than have the page contain all of the data, why not make use of a ReferenceField such as a droptree and get the data from that item.
Update 20180914: I started thinking about blogging a new article to discuss the use of Google Static Maps, but then remembered that this article shows the use of that! Once consideration to make is that the images could be lazy-loaded using some simple JavaScript if you wish to reduce hits against your API quota. In the Summer of 2018 Google started charging, so reducing this could help your company save some big bucks!
As a followup to my post on building a custom tool in SXA, I wanted to share a new discovery which makes greater use of NVelocity.
If you have used Rendering Variants in SXA you may have come across the token $item. With this token you are able to access data on the page item. Rather than have the page contain all of the data, why not make use of a ReferenceField such as a droptree and get the data from that item.
Update 20180914: I started thinking about blogging a new article to discuss the use of Google Static Maps, but then remembered that this article shows the use of that! Once consideration to make is that the images could be lazy-loaded using some simple JavaScript if you wish to reduce hits against your API quota. In the Summer of 2018 Google started charging, so reducing this could help your company save some big bucks!
Location Page with Reference to POI
SXA provides a way to store Points of Interest (POI) and link to a page. In the following example, you can see that the My Location POI allows for a link to a page. I personally don't like relying on this direction of reference because I expect the page to either inherit from POI or reference a POI.
In my solution, I create a new field on the page called "POI" and link back to the POI. As you see below, the new field points back to the global data directory so the user can pick from an existing list of POIs.
I would imagine an automated process mapping the POI to a page, but that's a problem to solve for another day.
Build the Tool
Getting back to the item tool, we need to create a new method for accessing a reference field.
Create a tool called $itemFieldTool and then use it in the rendering variant.
Use the Tool
In my use case, I needed to show a Google Static map on the page. Here is the rendering variant I setup.
The Map VariantTemplate contains the data from the gist. In the below example we have a Google Static Map getting loaded; you may want to lazy-load to reduce hits against your quota. Consider creating another tool ($mapTool) to return the MapsProvider key from SXA.
The part that I found really cool was that you can create a new variable called $refItem and it would appear in the same context as $item.
This is where the fun part is in the gist:
#set($refItem = $itemFieldTool.GetItemReferenceItem($item, "POI"))
I hope this helps you build something super awesome. If you use it please share a link in the comments so others can celebrate your success.
- Michael
The part that I found really cool was that you can create a new variable called $refItem and it would appear in the same context as $item.
This is where the fun part is in the gist:
#set($refItem = $itemFieldTool.GetItemReferenceItem($item, "POI"))
I hope this helps you build something super awesome. If you use it please share a link in the comments so others can celebrate your success.
- Michael
SXA Fake Navigation Link
If you have worked on any website navigation, you may have encountered a scenario where you need to represent a link in the menu, such as to the Home page. In the following post I'll describe how I created a link to a page, without there actually being a page.
As you can see in the above example, the Home page is represented as a sibling to the About and Locations pages.
I created an item in the tree to represent the Home page, but without all of the overhead of a full page.
While working with SXA you'll see that there is a Navigation component which allows you to specify a few properties to simplify the setup.
The option to include the root page should work for you in most scenarios. When the markup is generated, you however do not see the Home page on the same level. Let me show the differences in markup.
Here is an example with the root page included and the structure flattened. Notice that the real Home page is at level0, and my fake Home page is at level0 but nested under a ul li.
As you would expect, if you don't flatten the structure the level classes change but the markup is the same.
By creating the fake Home item you are able to eliminate the level0 and thus simplify the markup. Notice that the levels begin with level1.
As you can see in the above example, the Home page is represented as a sibling to the About and Locations pages.
I created an item in the tree to represent the Home page, but without all of the overhead of a full page.
Out of the box
Let's have a look at what comes out of the box, and why I decided to do something different.While working with SXA you'll see that there is a Navigation component which allows you to specify a few properties to simplify the setup.
The option to include the root page should work for you in most scenarios. When the markup is generated, you however do not see the Home page on the same level. Let me show the differences in markup.
Here is an example with the root page included and the structure flattened. Notice that the real Home page is at level0, and my fake Home page is at level0 but nested under a ul li.
As you would expect, if you don't flatten the structure the level classes change but the markup is the same.
By creating the fake Home item you are able to eliminate the level0 and thus simplify the markup. Notice that the levels begin with level1.
Sunday, February 4, 2018
Hamburger Menu In SXA
The following post was typed with one hand while my new born baby sleeps.
The checklist:
- Create styles in SXA that will be attached to components.
- Add Row Splitter to header Partial Design. Add style Navbar.
- Add Plain HTML component to row 1. Add button snippet and adjust target class.
- Add Navigation component to row 1. Add style Navbar Collapse.
- Add bootstrap.js to theme.
Thursday, February 1, 2018
SXA Theme Upgrade Tip using SPE
In some recent conversations on Sitecore Slack Chat I needed to determine why a component script in SXA was not working as desired (broke). I decided to write a short PowerShell script in SPE to speed up the troubleshooting.
The following script is designed to compare two script directories under the specified themes and determines which ones have different file sizes.
Let's have a look at the sample output:
With this information you are hours ahead of where you would have been trying to figure out why the "component-carousel" works on my machine but not in production!
Cheers!
Michael
The following script is designed to compare two script directories under the specified themes and determines which ones have different file sizes.
Let's have a look at the sample output:
With this information you are hours ahead of where you would have been trying to figure out why the "component-carousel" works on my machine but not in production!
Cheers!
Michael
Wednesday, January 31, 2018
Michael West Wins Sitecore "Most Valuable Professional" Award
Michael West Wins Sitecore "Most Valuable Professional" Award
Elite distinction awarded for exceptional contributions to the Sitecore ecosystem
Dallas, TX, USA - January, 31, 2018 - Michael West has been named a "Most Valuable Professional (MVP)" in the Technology category by Sitecore®, the global leader in experience management software. Michael West was one of only 208 Technology MVPs worldwide to be named a Sitecore MVP this year.
Now in its 12th year, Sitecore’s MVP program recognizes individual technology, strategy, and commerce advocates who share their Sitecore passion and expertise to offer positive customer experiences that drive business results. The Sitecore MVP Award recognizes the most active Sitecore experts from around the world who participate in online and offline communities to share their knowledge with other Sitecore partners and customers.
"The Sitecore MVP awards recognize and honor those individuals who make substantial contributions to our loyal community of partners and customers,” said Pieter Brinkman, Sitecore Senior Director of Technical Marketing. “MVPs consistently set a standard of excellence by delivering technical chops, enthusiasm, and a commitment to giving back to the Sitecore community. They truly understand and deliver on the power of the Sitecore Experience Platform to create personalized brand experiences for their consumers, driving revenue and customer loyalty."
The Sitecore Experience Platform™ combines web content management, omnichannel digital delivery, insights into customer activity and engagement, and strategic digital marketing tools into a single, unified platform. Sitecore Experience Commerce™ 9, released in January 2018, is the only cloud-enabled platform that natively integrates content and commerce so brands can fully personalize and individualize the end-to-end shopping experience before, during, and after the transaction. Both platforms capture in real time every minute interaction—and intention—that customers and prospects have with a brand across digital and offline channels. The result is that Sitecore customers are able to use the platform to engage with prospects and customers in a highly personalized manner, earning long-term customer loyalty.
More information can be found about the MVP Program on the Sitecore MVP site: http://www.sitecore.com/mvp
Saturday, November 18, 2017
Thank You Community Leaders 2017
In the season of Thanksgiving, it felt appropriate to share some appreciation for members of the community. This list is by no means a complete and thorough account of what I received but it's a good start.
Pickled Feet Beaver. Unicorn has been a huge time and money saver. Thank you Kam for being the super smart guy we all need. Reach him on Slack as @kamsar.
Thank you Una Verhoeven for all your Sitecore community work and helping me with SXA. Your help made my first implementation that much better. Reach her on Slack as @una.verhoeven.
Final Thoughts
I encourage you to show your appreciation for those that have really helped you. Consider recommending those same people for Sitecore MVP. Also, try not to DM those people on Slack for support; stick to the group channels and only shift to the DM when they invite you to do so.
Akshay Sura
Akshay is a friend to everyone. Some of my favorite shirts were gifts from him. He's the reason we have http://www.ourcorecommunity.com/ and the much needed "Unofficial Sitecore Training". It's no wonder he received the most community votes for the "Core Community Friend Award 2018". Thank you Akshay for all you do for me and the community. Without you there would be a huge hole in the TEAM. Reach him on Slack as @akshaysura.Kamruz Jaman
Lieutenant Troll and one of the best Sitecore Technical Support members on Slack. Kidding aside, he has helped so much through his blog posts and insights while communicating on the Sitecore Slack Chat. The Core Community Award was a big hit with your help. Overall funny guy and easy to get along with. Thank you Kamruz for all you do for me and the community. Without you the bridge would be a lonely place. Reach him on Slack as @jammykam.Kam Figy
Thank you for your strangely named open source products like Unicorn, Rainbow, Dianoga, andMark Cassidy
Thank you for possessing the grit needed to keep the Sitecore Stack Exchange alive. IIRC you stated this was the third try and so far it's a huge success. There is so much we've gained by having a Stack Exchange. Looking forward to our next root beer! Reach him on Slack as @cassidydotdk.Adam Najmanowicz
Thank you for being foolish enough to let me help with SPE and leaving all the book documentation to me :) Your help with Zen Garden and now SXA has been fantastic.You nominating me for my first MVP award has made all the difference in my participation within the Sitecore community. Thank you Adam for telling me "no" when my ideas are crazy and "yes" when you're tired of arguing. Looking forward to our next root beer....well I'll drink the root beer since you think it tastes like toothpaste. Reach him on Slack as @adamnaj.Honorable Mentions
Thank you Mike Reynolds for the copious amounts of blogging you did that help me get a jump start on Sitecore development. The Core Community Award was a big hit with your help as was the "Unofficial Sitecore Training". Also, thank you for nominating me for my first MVP award; look how much I've grown! Reach him on Slack as @sitecorejunkie.Thank you Una Verhoeven for all your Sitecore community work and helping me with SXA. Your help made my first implementation that much better. Reach her on Slack as @una.verhoeven.
Final Thoughts
I encourage you to show your appreciation for those that have really helped you. Consider recommending those same people for Sitecore MVP. Also, try not to DM those people on Slack for support; stick to the group channels and only shift to the DM when they invite you to do so.
Subscribe to:
Posts (Atom)



























