Robert Guyett's Blog

Sitecore with VueJS: Reserved Attributes and Ignored Elements

2020-03-25T14:41:00.000-04:00

VueJS Strips Reserved Attributes on Ignored Elements

Experience Editor is what makes Sitecore EXTRA amazing as a CMS. Don't get me wrong it has alot to offer but the "oohhh ahhh WWoooWws" happen when it starts showing off what it can do through the experience editor.

One of the gotchas I ran into when connecting Sitecore and VueJS (and I'm sure its the same for any framework that crawls the DOM to figure out what it should be doing) is that sometimes attributes can conflict with each other. In VueJS world it thinks its a vuejs attribute and will remove it from the dom and try to use it. Unfortunately even on ignored elements it will still strip its reserved attributes...

Which breaks the experience editor with sitecore...

The Problem

VueJS removes Sitecore's attributes like "key" from the DOM even on elements that are marked to be ignored. There could be other conflicts but this is the one that got me.

The Solution

To make these conflicting elements not conflict, DUH!

What we know:

There is no configuration to change sitecore to use different attributes and sitecore doesnt use scoped attributes e.g: namespace-attrname
It would be a huge amount of effort and might ruin the upgrade path to try and alter such an integrated keyword in Sitecore's experience editor
There is no configuration to change VueJS to use scoped keywords eg: vue-reservedkeywordname
Vue has events that fire at the beginning of processing and just at the end of processing
Vue has an ignoredElements configuration but some special attributes still get parsed out (like "key")

Approach:

Javascript module that alters reserved attributes on vue component
It should not crawl over every single element...it needs to be focused and specialized for performance reasons

We'll only look at elements that have been marked to be ignored use the

Because we don't really know all the conflicts we'll make the list of attributes expandable
It will change the attribute names before VueJS processes its components and put them back to their original name's when its finished (this is only for elements vuejs shouldnt have been messing with in the first place)

Implementation:

The Module:

/**
 * Author: Robert Guyett
 * Purpose: Resolves conflict with the "key" attribute between Sitecore's Experience Editor and VueJS
 * for Elements that VueJS should be ignoring
 */
import Vue from 'vue';

const reservedAttributes = ['key'];
const attrPrefix = 'data-';
export default {
    /**
     * Usage: Used just before vue is initialized in the root vueJS beforeCreate() event
     * This ads "data-" in front of any attribute marked as reserved by VueJS
     * NOTE: the reserved attributes doesnt tie into vuejs. its just an array of reserved attributes "reservedAttributes"
     */
    protectAttributes: () => {
        let reservedElements = [...Vue.config.ignoredElements];
        reservedElements.forEach(reservedEl => {
            [...document.querySelectorAll(reservedEl)].forEach(element => {
                if(element.hasAttributes() === false) {
                    return;
                }

                let elAttrNames = element.getAttributeNames();
                reservedAttributes.forEach(attrName => {
                    if(elAttrNames.includes(attrName)) {
                        // give the attribute a prefix
                        element.setAttribute(attrPrefix + attrName, element.getAttribute(attrName));
                    }
                });
            });
        });
    },
    /**
     * Usage: Used right after everything is mounted in the root VueJS mounted() event
     * This puts everything back the way it was
     */
    persistAttributes: () => {
        let reservedElements = [...Vue.config.ignoredElements];
        reservedElements.forEach(reservedEl => {
            [...document.querySelectorAll(reservedEl)].forEach(element => {
                if(element.hasAttributes() === false) {
                    return;
                }

                let elAttrNames = element.getAttributeNames();
                reservedAttributes.forEach(attrName => {
                    if(elAttrNames.includes(attrPrefix + attrName)) {
                        // set the attribute name back to the original value without the prefix
                        element.setAttribute(attrName, element.getAttribute(attrPrefix + attrName));
                    }
                });
            });
        });
    }
};

Usage:

import ignoredElementFix from './ignoredElementsFix'

export default new Vue({
    el: '#app',
    beforeCreate() {
        ignoredElementFix.protectAttributes();
    },
    mounted() {
        ignoredElementFix.persistAttributes();
    }
});

Soft Skills: Communicate on Another Level

2020-03-13T04:20:00.000-04:00

Communicate on Another Level

Over the years I've dedicated a lot of energy into being able to communicate and understand Project Managers, Product Owners, Programmers with various skill levels and specializations, and APIs. However, that list doesn't include anyone with a broader level of concerns. The past couple years I've noticed I've had to communicate more and more with Executives, Business Owners, and Managers of various levels more and more as my responsibilities increase and my impact on projects become greater. So the goal is to learn to communicate with people who care less about the inside workings of the project at hand and more about funding, timeline, overall health, and impact of multiple projects.

Ground Level

I am a software engineer. I understand how code works and how to take an end goal and break it down into smaller tasks for success including the fine intricate details. I can organize code and explain how code works with other sets of code or services for a project or even multiple projects, and I can write documentation for code too. Unfortunately that is not what is really important on the business level.

A Little More Management Scope

On the business level we move from code concerns to management and profitability concerns. End goals need to be broken down into milestones for tracking progress, and impact for time and resources and less about completing three tasks to get X feature completed. Dependency issues transform from inter-dependency between code to inter-dependency between teams, partnerships, and events. In a sense, its the same concerns but with people/team/resource/business components instead of code components. At this level reporting justifications for initiatives becomes critical to success.

Upper Management

A typical high level manager or C-Suit would never know first-hand what they could have saved in money and most likely isn't collecting metrics to find out an accurate ROI. They are trusting the reports of their subordinates. More importantly they need to understand the relationship of the metric of the report to the ROI. This is why time becomes the primary metric. Its easy and simple The faster its done equals the cheaper it is which means better ROI. Errors are a much better metric to track ROI for because alot of errors generally means alot of people are having terrible experiences. For clarity; we are not talking about engagement values. We are talking about the value of development speed vs quality. Is it justifiable to have higher quality development?

Sitecore with VueJS: Html Fragment Module

2020-03-12T23:40:00.002-04:00

Sitecore Module for VueJS

I recently worked on a Sitecore 9.1 project where we got the chance to use a front end framework called VueJS. If you haven't had the chance to work with VueJS you should check them out https://vuejs.org/. It was very nice to work with once we got through some of the kinks. One of those issues was that VueJS is driven by javascript (duh!)...not HTML....You know what likes to spit out HTML though? Sitecore!

The Challenge

How do we make it so we can use Sitecore's placeholders and Sitecore's render methods with all of the nesting glory that can be done with them into a VueJS template?

The Solution

To make a VueJS component that accepts the same formats Sitecore uses of course! Under the hood, Sitecore renders a begin tag element and an end tag element.

What we know:

The most basic render method just takes those two properties and slaps them together to form a whole html element.
VueJS utilizes a simple tree structure for components that requires each component have exactly one root element

Approach:

VueJS component that translates Sitecore render into a "dynamic" VueJS component (yes, i said that right)
The "dynamic" component will be "mounted" to the current VueJS component (which is our Sitecore VueJS component...yes...component-ception!)
To support anything that might get put between the begin tag and endtag we'll add some VueJS <slot> support

Implementation:

// Author: Robert Guyett
// Purpose: Workaround for Issue https://github.com/vuejs/vue/issues/7431
import Vue from 'vue';

const component = {
    functional: true,
    props: {
        html: {
            type: String,
            required: false,
            default: ''
        },
        begintag: {
            type: String,
            required: false,
            default: ''
        },
        endtag: {
            type: String,
            required: false,
            default: ''
        }
    },
    render(createElement, ctx) {
        let html = ctx.props.html;
        let addHtmlAsChild = true; // in case we ever want to add the html after the slot, we have granular control (maybe make it a property?) -rlg
        let begintag = ctx.props.begintag;
        let endtag = ctx.props.endtag;
        var generatedTemplate = '';

        if(begintag === '') {
            generatedTemplate = `${html}`;
            addHtmlAsChild = false;
        } else if(begintag !== '' && endtag === '') {
            generatedTemplate = `${begintag}`;
            addHtmlAsChild = false;
        } else {
            generatedTemplate = `${begintag}${endtag}`;
            addHtmlAsChild = false;
        }

        let component = new Vue({
            template: `
${generatedTemplate}
`
        });

        // add our default slot as a child node if applicable
        let defaultSlot = ctx.slots().default;
        if(typeof (defaultSlot) !== 'undefined') {
            component.$slots = { default: defaultSlot };
        }

        // initialize the component to get our virtual node
        var node = component.$mount()._vnode;
        node.children = node.children || [];

        // add html prop as a child if applicable
        if(addHtmlAsChild === true && html !== '') {
            var htmlNode = new Vue({
                template: html
            }).$mount()._vnode;
            node.children.push(htmlNode);
        }

        return node.children;
    }
};
Vue.component('html-fragment', component); // globally register this component
export default component;

Final Notes:

This is one way to get Sitecore's data into VueJS but it doesnt really allow us to manipulate that data like we would want to in the experience editor and do personalization with VueJS.