Posts with the tag Open Source

Using XSLT in Components

OU Campus components can create powerful interfaces behind the scenes while providing a simple interface for users to interact with. One of the more exciting things is that your components can export XSLT which can be interpreted by the translator when publishing.

OU Campus and Alexa Integration

At the 2017 OmniUpdate Training Conference Hackathon a group created an application that would connect Amazon’s Alexa with OU Campus. The tweet to the right is a demonstration of asking Alexa to check in files for OU Campus. The application will also return the number of files checked out.

Add Google Event Tracking to Links in OU Campus

The University of Northern Colorado has recently embraced all things analytics and as part of that we had a need to add event tracking code to buttons. The best use of this is when a pdf or document needs to be tracked. Since that content can’t have the analytics code, the link to it can fire an event that can be tracked in Google Analytics.

The Google Event Tracking Gadget will help web contributors create event tracking codes on links.

This gadget works with the most recent version of Google Analytics, or analytics.js. Full documentation about events can be found within Google’s Event Tracking Documentation.

The final code that is produced by the gadget is this:

Test to see if it worked

Publish the file with OU Campus and click on the link. Next, login to Google Analytics and open up a view that is part of that page. On the right column select “Real-Time” / “Events”. The current events happening on the site will be displayed. It usually takes a few seconds for an event to show up.

Item #3 below is the event that was fired when the link from the code above was clicked on.

Clicking into the row will show the Event Label, which in this case was “Jesse”

The Gadget

The code for the gadget is up on GitHub or if you would like to install it via GitHub Pages, follow OmniUpdate’s Instructions for installing a gadget, when asked for the URL use:

https://jessgusclark.github.io/gadget-event-tracking/build/

Inserting Icons into OU Campus

Our web authors love icons and for the longest time they inserted them as icons that they found from google searches. Our designer would design custom icons for sites and they would be converted to svgs and placed in the page. Both of these solutions worked but were clunky. Luckily, icon fonts and icon sets have been popping up which provide end users an array of icons to use on their pages.

Non-content tag’s in WUSIWYG editors

The biggest challenge with inserting icons into a WYSIWYG interface is that they are usually only code and don’t render until after you preview the page. Most icon code looks similar to this:

<i class="material-icons xl UNC-blue">assessment</i>

In this example, the word assesssment would be written on the page without any context. Within the WYSIWYG editor, a user could get stuck within the tag and could be difficult to get out of. Typing content inside the tag would be hidden by CSS.

Table Transformations

OU Campus users are familiar with table transformations as it allows users to create tab navigation, accordions and other content structures where some of the content may be hidden when the page loads. This solution works great in edit mode because the web author can edit all of the content on the page. If your installation was like ours, you may have the ‘Place cursor at the end of this sentence to add more content’ content which helps with the cursor issue in WYSIWYG editors with tables.

Image Transformations

I’d like to introduce the concept of an image transformation for icons. The benefit of using an image instead of a table is that the tag is inline so icons can be placed with content. When the user inserts and image with a specific class to the page, it gets converted into an icon.

In the picture above the source of the image is a placeholder, it doesn’t matter what image this is because it will be replaced using XSL on preview and publish. (The source could be a dependency tag if the image was within OU but this image will never get served to the public.)

The description is the one of hundreds of icons that could be inserted. This demo uses Google’s Material Icon set but any icon set would work.

Class is the additional classes that the tag needs to render out the icon. material-icons is the parent class that is used by Google and will be searched for in the XSL match below. xl is the size (extra-large) and gold is the color of the icon. The Dimensions are also added but this only effects the editor.

After hitting [OK], the WYSIWYG editor puts an image in the editor that we can edit just like an image:

<img class="material-icons xl gold" 
	src="https://www.unco.edu/omni/gadgets/icons/img/placeholder.svg"
	alt="account_balance_wallet" width="200" height="200" />

HTML Transform!

On preview and publish the image needs to be replaced with the icon code. A simple template match to find the class .material-icons will work:

<!-- Convert img to icon -->
<xsl:template match="img[starts-with(@class, 'material-icons')]">
  <i class="{@class}"><xsl:value-of select="@alt" /></i>
</xsl:template>

So you expect web authors to remember all these steps?

This solution works great if you follow these steps and know the short code for each icon. Expecting web authors to know this and go through the process each time is not reasonable. This is where the Material Icons Gadget comes in! With a side bar gadget, the user can select their icon, size and color from dropdowns and then insert the code into the editor. The only downside is that when they are in edit mode they see the placeholder image.

Install

Take a look at the Readme file at the root of the GitHub repository for detailed instructions. CSS for the icon set, colors and sizes needs to be added. The XSL transformation needs to be applied and the gadget needs to be installed.

Final Thoughts

Google’s icon set was used here but any icon set could work. In fact the gadget could be expanded to provide multiple icon sets for users. If you feel like contributing, please do on Github!

CheckIn All Content Gadget

April 27th, 2018 Update A new version of this gadget has been released!

The Unpublished Gadget

At the 2016 OmniUpdate Hackathon I joined a group of six people who built a gadget that unpublishes files from the web server. The idea started out as a simple sidebar gadget that when clicked would go to the production server and remove the file while keeping it on the staging server. After about two hours of coding the gadget was “completed”. At that point, if you unpublished a file and navigated a different page, the button was still disabled. This was a known bug and I reported it the next day. Yesterday I had sometime to fix this error and I believe the gadget is ready to be used.