TimeLine Dynamic in Widget

__47
Tera Contributor

‎10-17-2022 02:04 PM - edited ‎10-17-2022 07:12 PM

I need to create a dynamic timeline in a widget in ServiceNow. I'm using the code below. But, the dynamic variables don't work (as the picture shows). I would like to know how to set this variable in client script, because when I use ${Variable Name} instead of showing the dynamic variable, the name "Variable Name" appears.

 

HTML

<div class="container">
    <h2>Dynamic Timeline</h2>
    <ul class="timeline"></ul>
</div>

JavaScript

function(){
var c = this;

var timeline = document.querySelector(".timeline"),
    jsonResponse = [{
        postedTime: "25/03/2016 18:22",
        postedPlace: "twitter",
        postedContent: "blah blah blah",
        postedTitle: "Post One"
    }, {
        postedTime: "21/03/2016 13:44",
        postedPlace: "facebook",
        postedContent: "blah blah blah?",
        postedTitle: "Post Two"
    }, {
        postedTime: "18/03/2016 22:41",
        postedPlace: "pinterest",
        postedContent: "blah blah blah bloo!",
        postedTitle: "Post Three"
    },{
        postedTime: "25/03/2016 18:22",
        postedPlace: "twitter",
        postedContent: "blah blah blah",
        postedTitle: "Post One"
    }, {
        postedTime: "21/03/2016 13:44",
        postedPlace: "facebook",
        postedContent: "blah blah blah?",
        postedTitle: "Post Two"
    }, {
        postedTime: "18/03/2016 22:41",
        postedPlace: "pinterest",
        postedContent: "blah blah blah bloo!",
        postedTitle: "Post Three"
    }];

jsonResponse.forEach((item, index) => {
    var {
        postedTime,
        postedPlace,
        postedContent,
        postedTitle
    } = item;

    var even = index % 2 === 0;

    timeline.innerHTML += `<li class="${even ? 'timeline-inverted' : ''}">
            <div class="timeline-badge"><i class="glyphicon ${even ? 'glyphicon-plus' : 'glyphicon-minus'}"></i></div>
            <div class="timeline-panel">
                <div class="timeline-heading">
                    <h4 class="timeline-title">${postedTitle}</h4>
                    <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> ${postedTime} via ${postedPlace}</small></p>
                </div>
                <div class="timeline-body">
                    <p>
        ${postedContent}                
    </p>
                </div>
            </div>
        </li>`;
});
}

CSS

$color_gallery_approx: #eeeeee;
$color_quill_gray_approx: #d4d4d4;
$black_17_5: rgba(0, 0, 0, 0.175);
$color_celeste_approx: #ccc;
$white: #fff;
$red: red;
$color_japanese_laurel_approx: green;

h2 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    font-weight: 700;
    font-family: sans-serif;
}

.timeline {
    list-style: none;
    padding: 20px 0;
    position: relative;
    &:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 3px;
        background-color: $color_gallery_approx;
        left: 50%;
        margin-left: -1.5px;
    }
    > li {
        margin-bottom: 20px;
        position: relative;
        &:before {
            content: " ";
            display: table;
        }
        &:after {
            content: " ";
            display: table;
            clear: both;
        }
        img {
            max-width: 100%;
        }
        > {
            .timeline-panel {
                width: 46%;
                float: left;
                border: 1px solid $color_quill_gray_approx;
                border-radius: 2px;
                padding: 20px;
                position: relative;
                box-shadow: 0 1px 6px $black_17_5;
                &:before {
                    position: absolute;
                    top: 26px;
                    right: -15px;
                    display: inline-block;
                    border-top: 15px solid transparent;
                    border-left: 15px solid $color_celeste_approx;
                    border-right: 0 solid $color_celeste_approx;
                    border-bottom: 15px solid transparent;
                    content: " ";
                }
                &:after {
                    position: absolute;
                    top: 27px;
                    right: -14px;
                    display: inline-block;
                    border-top: 14px solid transparent;
                    border-left: 14px solid $white;
                    border-right: 0 solid $white;
                    border-bottom: 14px solid transparent;
                    content: " ";
                }
            }
            .timeline-badge {
                color: $white;
                width: 50px;
                height: 50px;
                line-height: 50px;
                font-size: 1.4em;
                text-align: center;
                position: absolute;
                top: 16px;
                left: 50%;
                margin-left: -25px;
                z-index: 100;
                border-top-right-radius: 50%;
                border-top-left-radius: 50%;
                border-bottom-right-radius: 50%;
                border-bottom-left-radius: 50%;
            }
        }
        &:nth-child(even) > .timeline-badge {
            background-color: $red;
        }
        &:nth-child(odd) > .timeline-badge {
            background-color: $color_japanese_laurel_approx;
        }
        &.timeline-inverted > .timeline-panel {
            float: right;
            &:before {
                border-left-width: 0;
                border-right-width: 15px;
                left: -15px;
                right: auto;
            }
            &:after {
                border-left-width: 0;
                border-right-width: 14px;
                left: -14px;
                right: auto;
            }
        }
    }
}
.timeline-title {
    margin-top: 0;
    color: inherit;
}
.timeline-body {
    > p {
        margin-bottom: 0;
        + p {
            margin-top: 5px;
        }
    }
    > ul {
        margin-bottom: 0;
    }
}
@media(max-width: 767px) {
    ul.timeline {
        &:before {
            left: 40px;
        }
        > li > {
            .timeline-panel {
                width: calc(100% - 90px);
                float: right;
                &:before {
                    border-left-width: 0;
                    border-right-width: 15px;
                    left: -15px;
                    right: auto;
                }
                &:after {
                    border-left-width: 0;
                    border-right-width: 14px;
                    left: -14px;
                    right: auto;
                }
            }
            .timeline-badge {
                left: 15px;
                margin-left: 0;
                top: 16px;
            }
        }
    }
}

 

ExpectationExpectationRealityReality

0 Helpfuls
  • 686 Views
4 REPLIES 4

Claude DAmico
Kilo Sage

‎10-17-2022 03:31 PM

Where are you creating this? I thought this was possibly a Service Portal widget, but pasting your code in shows errors that won't allow saving in my PDI.

 

Also, I'm thinking that how the variable is being called should be like item.variable_name instead.

Claude E. D'Amico, III - CSA
0 Helpfuls

__47
Tera Contributor
In response to Claude DAmico

‎10-17-2022 07:16 PM

Hi, Claude!
I'm creating in Service Portal Widget

I edited the Client Script as I did.

I also tried with item.variable_name but don't work.

picture.png

0 Helpfuls

__47
Tera Contributor
In response to __47

‎10-17-2022 07:22 PM

If I use item.variable_name

variablename.png

0 Helpfuls

Claude DAmico
Kilo Sage
In response to __47

‎10-18-2022 10:27 AM

Gotcha! The issue was I wasn't in the same widget editor as you. Seems like using just the form instead of the designer interface like you are was the issue.

 

Anyway... I did get it working for me. It did have to do with how the variable was being called into the html construction. Try below.

function(){
	var c = this;

	var timeline = document.querySelector(".timeline"),
			jsonResponse = [{
				postedTime: "25/03/2016 18:22",
				postedPlace: "twitter",
				postedContent: "blah blah blah",
				postedTitle: "Post One"
			}, {
				postedTime: "21/03/2016 13:44",
				postedPlace: "facebook",
				postedContent: "blah blah blah?",
				postedTitle: "Post Two"
			}, {
				postedTime: "18/03/2016 22:41",
				postedPlace: "pinterest",
				postedContent: "blah blah blah bloo!",
				postedTitle: "Post Three"
			},{
				postedTime: "25/03/2016 18:22",
				postedPlace: "twitter",
				postedContent: "blah blah blah",
				postedTitle: "Post One"
			}, {
				postedTime: "21/03/2016 13:44",
				postedPlace: "facebook",
				postedContent: "blah blah blah?",
				postedTitle: "Post Two"
			}, {
				postedTime: "18/03/2016 22:41",
				postedPlace: "pinterest",
				postedContent: "blah blah blah bloo!",
				postedTitle: "Post Three"
			}];

	jsonResponse.forEach((item, index) => {
		var {
			postedTime,
			postedPlace,
			postedContent,
			postedTitle
		} = item;

		var even = index % 2 === 0;

		timeline.innerHTML += `<li class="${even ? 'timeline-inverted' : ''}">
		<div class="timeline-badge"><i class="glyphicon ${even ? 'glyphicon-plus' : 'glyphicon-minus'}"></i></div>
            <div class="timeline-panel">
                <div class="timeline-heading">
                    <h4 class="timeline-title">` + item.postedTitle + `</h4>
                    <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> ` + item.postedTime + " via " + item.postedPlace + `</small></p>
                </div>
                <div class="timeline-body">
                    <p>` + 
        item.postedContent                + `
    </p>
                </div>
            </div>
        </li>`;
	});
}

 

ClaudeDAmico_0-1666114020825.png

 

Claude E. D'Amico, III - CSA
0 Helpfuls