I’m not an experienced developer and have just successfully developed my first custom widgets for the SAP Analytics Cloud.

However, I found the testing process for my implementation to be cumbersome. Every time I added a new line of code or encountered an error, I had to delete the custom widget from SAC and re-upload the changed files.

Is there any way to test the code directly in the browser without having to delete and re-upload to SAC each time? Currently, the widgets consist of three JavaScript files for the main, builder, and styling, along with a JSON file.

I attempted to test the script using a live server extension in VS Code, but without success (I’m also new to web components). Basically I was at least expecting to be able to see the little traffic light from the coding and test things like click events. However, the traffic light itself is not displayed in the browser but I can retrieve logs in the chrome development tool.

I would greatly appreciate any advice or guidance on this matter.

Here is my coding for the main file:

(function() {
    let template = document.createElement("template");
    template.innerHTML = `
    <style>
        .traffic-light {
            width: 50px;
            height: 100px;
            background-color: black;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
        }

        .light {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: grey;
            border: 2px solid black;
        }

        .red {
            background-color: grey;
        }

        .green {
            background-color: grey;
        }
    </style>

    <div class="traffic-light">
        <div class="light red"></div>
        <div class="light green"></div>
    </div>
    `;

    class ColoredBox extends HTMLElement {
        constructor() {
            super();
            let shadowRoot = this.attachShadow({ mode: "open" });
            shadowRoot.appendChild(template.content.cloneNode(true));
            //this._circle = Array.from(this.shadowRoot.querySelectorAll('.light'));
            //this._circle.forEach(light => { light.addEventListener('click', this.onClick.bind(this)); });
            this.addEventListener("click", event => {
                var event = new Event("onClick");
                this.dispatchEvent(event);
            });
            this._props = {};
        }

        onCustomWidgetBeforeUpdate(changedProperties) {
            this._props = { ...this._props, ...changedProperties };
        }
        
        onCustomWidgetAfterUpdate(changedProperties) {

            const redLight = this.shadowRoot.querySelector('.light.red');
            const greenLight = this.shadowRoot.querySelector('.light.green');
            const body = this.shadowRoot.querySelector('.traffic-light')
            
            if ("colorTopLight" in changedProperties) {
                redLight.style.backgroundColor = changedProperties["colorTopLight"];
            }
            if ("colorBottomLight" in changedProperties) {
                greenLight.style.backgroundColor = changedProperties["colorBottomLight"];
            }
            if ("colorBody" in changedProperties) {
                body.style.backgroundColor = changedProperties["colorBody"];
            }
            if ("opacityTop" in changedProperties) {
                redLight.style.opacity = changedProperties["opacityTop"];
            }
            if ("opacityBottom" in changedProperties) {
                greenLight.style.opacity = changedProperties["opacityBottom"];
            }
        }
    }

    customElements.define("test-main", ColoredBox);
})();