Skip to Content

Add a Slider to an HTML widget

Dear Portal community,

I am facing some issues with adding a slider in my home page.

In the previous portal, I could use a jquery library and put the code of the slider directly in my HTML code. I had no issues with this one, however, now it seems that it is causing some issues with the portal.

After adding my custom code to the HTML widget, I am not able to click anywhere. I can't edit widgets anymore (the cog never appears), I cannot change the view I am in (if I am in Apps and Pages, I will stay here, etc.).

A clue that pointed me the issue is when I try to click on the cog for a Page settings, the empty sections without widgets of my portal page are now displaying a "JQuery is undefined".

If I remove the code of the slider from my HTML, everything is OK.

Does somebody has any clue on this issue?

Here is the sample code I used for the slider. It is a standard code for this type of control.

Thank you for oyur attention.

Best regards.

Jacques-Antoine Ollier

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script>(function(a){if(typeof define==="function"&&define.amd){define(["jquery"],a)}else{a(jQuery)}}(function(b){var a;a=(function(){function c(e,d){this.elem=e;this.$elem=b(e);this.options=d;this.metadata=this.$elem.data("plugin-options")}return c})();a.prototype={defaults:{width:800,height:530,autoSize:true,touchNav:true,mouseNav:true,prevnextNav:true,prevnextAutoHide:true,pagerNav:true,startSlide:1,autoPlay:true,delay:0,interval:3000,repeat:true,playReverse:false,hoverPause:true,captionAutoHide:false,animationCssTransitions:true,animationDuration:500,animationTimingFunction:"linear",prevButtonClass:"slide-prev",nextButtonClass:"slide-next",activeSlideClass:"es-active",slideCaptionClass:"es-caption",pagerClass:"es-pager"},init:function(){var c,j,e,f,d,h,l,g,i,k;c=this;c.config=b.extend({},c.defaults,c.options,c.metadata);c.actionClick={action:false,x:0,y:0};c.currClick={x:0,y:0};c.data=b.data(c);b.data(c,"currentSlide",c.config.playReverse&&c.config.startSlide==1?c.$elem.children().length-1:c.config.startSlide-1);b.data(c,"nextSlide",c.data.currentSlide);b.data(c,"totalslides",c.$elem.children().length);b.data(c,"browserEnginePrefix",c._getBrowserEnginePrefix());b.data(c,"isPlaying",false);b.data(c,"isAnimating",false);b.data(c,"playPaused",false);b.data(c,"justTouched",false);b.data(c,"isMoving",false);b.data(c,"width",c.config.width);c.$elem.addClass("slider");c.$elem.css({position:"relative"});c.$elem.wrapInner("<div class='slide-wrapper'>",c.$elem).children();c.$elem.wrapInner("<div class='slide-container'>",b(".slide-wrapper",c.$elem)).children();c.$elem.wrapInner("<div class='slide-dragcontainer'>",b(".slide-container",c.$elem)).children();b(".slide-container",c.$elem).css({position:"relative"});k=b(".slide-dragcontainer",c.$elem);g=b(".slide-wrapper",c.$elem);i=g.children();if(c.config.prevnextNav){g.after("<div class='"+c.config.nextButtonClass+"'>");g.after("<div class='"+c.config.prevButtonClass+"'>");f=b("."+c.config.nextButtonClass,c.$elem);e=b("."+c.config.prevButtonClass,c.$elem);d=f.add(e);if(c.config.prevnextAutoHide){d.hide();c.$elem.hover(function(){d.fadeIn("fast")},function(){d.fadeOut("fast")})}e.on("click",function(m){c.previous()});f.on("click",function(m){c.next()});e.on("touchstart",function(m){m.stopPropagation()});f.on("touchstart",function(m){m.stopPropagation()})}if(c.config.pagerNav){c.$elem.append("<ul class='"+c.config.pagerClass+"'>");i.each(function(){b("<li />").appendTo(b("."+c.config.pagerClass,c.$elem)).attr("rel",b(this).index()).on("click",function(){b.data(c,"nextSlide",parseInt(b(this).attr("rel")));c._prepareslides(true);c._slide(true);c._manualInterference()})})}i.each(function(){h=b(this);l=h.data("plugin-slide-caption");if(l===undefined){return}if(this.tagName=="IMG"){h.wrap("<div>");h.after("<div class='"+c.config.slideCaptionClass+"'>");h.next().append(l)}else{h.append("<div class='"+c.config.slideCaptionClass+"'>");h.children().last().append(l)}if(c.config.captionAutoHide){b("."+c.config.slideCaptionClass,c.$elem).hide();c.$elem.hover(function(){b("."+c.config.slideCaptionClass,c.$elem).fadeIn("fast")},function(){b("."+c.config.slideCaptionClass,c.$elem).fadeOut("fast")})}});g.children().addClass("slide").css({position:"absolute",top:0,left:0,width:c.data.width,height:c.config.height,zIndex:0,display:"none",webkitBackfaceVisibility:"hidden"});j=i.height();g.css({position:"relative",left:0,height:j});b(".slide-container",c.$elem).css({width:c.data.width,overflow:"hidden",height:j});if(c.config.touchNav){k.on("touchstart",function(n){var m=n.originalEvent.touches[0];n.preventDefault();c._onMoveStart(m.pageX,m.pageY);c.actionClick.x=c.currClick.x=m.pageX;c.actionClick.y=c.currClick.y=m.pageY;c.actionClick.action=true;return n.stopPropagation()});k.on("touchmove",function(n){var m=n.originalEvent.touches[0];n.preventDefault();c.actionClick.action=false;c._onMove(m.pageX,m.pageY);c.currClick.x=m.pageX;c.currClick.y=m.pageY;return n.stopPropagation()});k.on("touchend",function(n){if((c.actionClick.action==true)&&(c.actionClick.x==c.currClick.x)&&(c.actionClick.y==c.currClick.y)){var m=k.find("."+c.config.activeSlideClass+" a, a."+c.config.activeSlideClass).attr("href");if((m!=undefined)&&(m!="")){window.location=m}}n.preventDefault();c._onMoveEnd();return n.stopPropagation()})}if(c.config.mouseNav){k.css("cursor","pointer");k.on("dragstart",function(m){return false});k.on("mousedown",function(m){c._onMoveStart(m.clientX,m.clientY);c.actionClick.x=m.clientX;c.actionClick.y=m.clientY;c.actionClick.action=false;b(window).attr("unselectable","on").on("selectstart",false).css("user-select","none").css("UserSelect","none").css("MozUserSelect","none");return m.stopPropagation()});b(window).on("mousemove",function(m){c._onMove(m.clientX,m.clientY);return m.stopPropagation()});b(window).on("mouseup",function(m){c._onMoveEnd();if((c.actionClick.x==m.clientX)&&(c.actionClick.y==m.clientY)){c.actionClick.action=true}b(window).removeAttr("unselectable").unbind("selectstart").css("user-select",null).css("UserSelect",null).css("MozUserSelect",null);return m.stopPropagation()});k.on("mouseup",function(m){if((c.actionClick.x==m.clientX)&&(c.actionClick.y==m.clientY)){c.actionClick.action=true}});k.on("click",function(m){if(c.actionClick.action!=true){m.stopPropagation();m.preventDefault()}})}if(c.config.autoSize){setTimeout(function(){c._resize()},50);b(window).resize(function(){return setTimeout(function(){c._resize()},50)})}c._prepareslides();c.gotoSlide(c.data.currentSlide);if(c.config.autoPlay){setTimeout(function(){c.start()},c.config.delay)}return this},previous:function(){var c,d;c=this;b.data(c,"slideDirection","previous");d=(c.data.nextSlide-1)%c.data.totalslides;if(!c.config.repeat&&(c.data.nextSlide-1)<0){if(c.config.playReverse){b.data(c,"playPaused",true);c.stop()}return}else{if(c.data.playPaused&&(c.data.nextSlide-1)>0){b.data(c,"playPaused",false);c.start()}}b.data(c,"nextSlide",d);return this._slide()},next:function(){var c,d;c=this;b.data(c,"slideDirection","next");d=(c.data.nextSlide+1)%c.data.totalslides;if(!c.config.repeat&&(c.data.nextSlide+1)>(c.data.totalslides-1)){if(!c.config.playReverse){b.data(c,"playPaused",true);c.stop()}return}else{if(c.data.playPaused&&(c.data.nextSlide+1)<(c.data.totalslides-1)){b.data(c,"playPaused",false);c.start()}}b.data(c,"nextSlide",d);return this._slide()},start:function(){var d,c,e;d=this;c=b(".slide-container",d.$elem);if(d.data.isPlaying&&d.data.playTimer){clearInterval(d.data.playTimer)}e=setInterval((function(){if(d.config.playReverse){d.previous()}else{d.next()}}),d.config.interval);b.data(d,"playTimer",e);if(d.config.hoverPause){c.unbind();c.hover(function(){b.data(d,"playPaused",true);return d.stop()},function(){b.data(d,"playPaused",false);return d.start()})}b.data(d,"isPlaying",true)},stop:function(){var d,c;d=this;c=b(".slide-container",d.$elem);clearInterval(d.data.playTimer);b.data(d,"playTimer",null);if(d.config.hoverPause&&!d.data.playPaused){c.unbind()}b.data(d,"isPlaying",false)},gotoSlide:function(h){var e,d,i,g,f,c;e=this;b.data(e,"nextSlide",(h)%e.data.totalslides);d=(h)%e.data.totalslides;b.data(e,"currentSlide",d);i=b(".slide-wrapper",e.$elem);g=i.children();f=i.children().eq(d);c=f.position().left;e._setActive(g,f);if(e.config.animationCssTransitions&&e.data.browserEnginePrefix){e._transition((-c),0)}else{i.css("left",-c)}e._alignSlides(c)},_manualInterference:function(){var c=this;if(c.data.isPlaying){c.stop();c.start()}},_prepareslides:function(c){var g,j,h,e,f,d;g=this;j=b(".slide-wrapper",g.$elem);h=j.children();e=g.data.width;f=Math.floor(g.data.totalslides/2);d=0;h.each(function(){b(this).css({display:"block",left:e*d,zIndex:10});d++;if(!c&&g.config.repeat&&d>f){d=g.data.totalslides%2?-f:-(f-1)}})},_onMoveStart:function(c,e){var d=this;if(!d.data.isMoving){b.data(d,"touchTime",Number(new Date()))}b.data(d,"touchedX",c);b.data(d,"touchedY",e);b.data(d,"isMoving",true);if(d.data.isPlaying){b.data(d,"playPaused",true);d.stop()}},_onMove:function(j,i){var c,k,g,f,h,d,e;c=this;if(!c.data.isMoving){return}k=b(".slide-wrapper",c.$elem);b.data(c,"scrolling",Math.abs(j-c.data.touchedX)<Math.abs(i-c.data.touchedY));if(!c.data.scrolling&&!c.data.isAnimating){g=k.children().eq(c.data.nextSlide);f=g.position().left;h=c.data.browserEnginePrefix.css;d=j-c.data.touchedX;e=c.data.width*0.1;if(!c.config.repeat){if(c.data.currentSlide<=0&&-d<-e){d=e}else{if(c.data.currentSlide>=(c.data.totalslides-1)&&-d>e){d=-e}}}c._transition(-f+d,0)}},_onMoveEnd:function(){var g,i,h,d,f,c,e;g=this;if(!g.data.isMoving){return}i=b(".slide-wrapper",g.$elem);b.data(g,"justTouched",true);h=i.children().eq(g.data.nextSlide);d=h.position().left;f=g.data.width*0.5;c=g.data.width*0.1;e=(Number(new Date())-g.data.touchTime<250);if(!g.config.repeat&&(i.position().left<-(d)&&g.data.currentSlide>=(g.data.totalslides-1)||i.position().left>(-d)&&g.data.currentSlide<=0)){g._transition((-d),0.15)}else{if(i.position().left>(-d+f)||(i.position().left>(-d+c)&&e)){this.previous()}else{if(i.position().left<-(d+f)||(i.position().left<-(d+c)&&e)){this.next()}else{g._transition((-d),0.15)}}}g._alignSlides(d);b.data(g,"isMoving",false);b.data(g,"justTouched",false);if(g.data.playPaused){g.start()}},_alignSlides:function(m){var d,n,l,j,o,e,c,f,h,g,k;d=this;if(!d.config.repeat){return}n=b(".slide-wrapper",d.$elem);l=n.children();if(m===undefined){j=n.children().eq(d.data.nextSlide);m=j.position().left}m=Math.round(m,0);o=Math.ceil(d.data.totalslides/2);e=d.data.width;c=0;l.each(function(){var i=Math.round(b(this).position().left);if(i>Math.round(m-e)){c++}});f=o-c;if(f<0){f=d.data.totalslides%2==0?f+1:f}for(h=0;h<Math.abs(f);h++){g=[].reduce.call(l,function(i,p){return b(i).offset().left<b(p).offset().left?i:p});k=[].reduce.call(l,function(i,p){return b(i).offset().left>b(p).offset().left?i:p});if(f>0){b(g).css("left",Math.round(b(k).position().left+e))}else{b(k).css("left",Math.round(b(g).position().left-e))}}},_slide:function(c){var f,e,i,h,g,d;f=this;e=f.data.nextSlide;i=b(".slide-wrapper",f.$elem);h=i.children();g=i.children().eq(e);d=Math.round(g.position().left);f._setActive(h,g);if(!c){f._alignSlides(d)}b.data(f,"isAnimating",true);if(f.config.animationCssTransitions&&f.data.browserEnginePrefix){f._transition((-d),(f.data.justTouched?0.5:1));i.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){b.data(f,"currentSlide",e);i.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");if(c){f._alignSlides(d)}})}else{i.stop().animate({left:-d},f.config.animationDuration,function(){b.data(f,"currentSlide",e);b.data(f,"isAnimating",false);b.data(f,"justTouched",false)})}},_transition:function(d,f){var h,j,g,c,i,e;h=this;j=b(".slide-wrapper",h.$elem);if(f===undefined||f<0){f=1}g=h.data.browserEnginePrefix.css;c=g+"Transform";i=g+"TransitionDuration";e=g+"TransitionTimingFunction";j[0].style[i]=(h.config.animationDuration*f)+"ms";j[0].style[e]=h.config.animationTimingFunction;j[0].style[c]="translateX("+d+"px)";j.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){b.data(h,"isAnimating",false);b.data(h,"justTouched",false);j.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd")})},_setActive:function(g,f){var e=this,d,c;d=e.config.activeSlideClass;g.removeClass(d);f.addClass(d);if(e.config.pagerNav){c=b("."+e.config.pagerClass,e.$elem);c.children().removeClass("act");c.find("[rel="+f.index()+"]").addClass("act")}},_resize:function(){var g,c,e,d,f;g=this;if(g.data.isPlaying){b.data(g,"playPaused",true);g.stop()}c=g.$elem.width();e=g.config.height/g.config.width;d=c*e;b.data(g,"width",c);b(".slide",g.$elem).css({width:c,height:d});f=b(".slide-wrapper",g.$elem).children().height();b(".slide-wrapper",g.$elem).css({height:f});b(".slide-container",g.$elem).css({width:c,height:f});if(g.data.playPaused){b.data(g,"playPaused",false);g.start()}g._prepareslides();g.gotoSlide(g.data.currentSlide)},_getBrowserEnginePrefix:function(){var d,e,c;d="Transition";e=["Moz","Webkit","Khtml","O","ms"];c=0;while(c<e.length){if(typeof document.body.style[e[c]+d]==="string"){return{css:e[c]}}c++}return false}};a.defaults=a.prototype.defaults;b.fn.excoloSlider=function(c){return this.each(function(){new a(this,c).init()})}}));</script>

Add comment
10|10000 characters needed characters exceeded

1 Answer

  • Posted on Mar 20, 2016 at 07:53 PM

    Hi Jacques-Antoine,

    are you looking for something like Carousel - SAPUI5 Demo Kit ?

    Other example SAPUI5 Explored

    As for the jquery undefined: it does not seems to be an sap specific problem, for that you can google solution e.g Bugsnag Blog - jQuery is not defined: Common causes and a simple solution

    Also wondering whether the jquery reference in the first line is really valid.

    Regards

    Ervin

    Add comment
    10|10000 characters needed characters exceeded

    • Hello Ervin,

      Thank you very much for your attention.

      Actually, I am now exploring the slider control of the SAP UI5 library and I am trying to make it work now instead of going with jQuery libraries.

      I also already went on the website you mentioned and nothing is fixing this issue.

      Actually, what is bothering me is that this control was working without any trouble in the past Portal version.

      Hopefully it was just a POC and I was not in Production.

      But it is still shocking to see that ALL my former apps built through the former HCP plugin in WebIDE are now obsolete! I cannot make them work in the new Portal.

      I will keep you in touch if I succeed in using the standard slider control from the SAP UI5 library.

      Thank you for your help.

      Best regards.

      Jacques-Antoine Ollier