Hi,

I'm developing a Custom Web Control.
The graphical part of the control works correctly both before and after the runtime starts, but events that try to access or manipulate CSS elements do not work as expected.

Everything works perfectly in Visual Studio Code, so I believe the issue is related to the WinCC Unified Runtime.

One possible approach is pointing every class' element using “document.querySelector” inside button's event which workde for a different CWC, but in this case it would be quite laborious.

//this are the css element  

.sidebar.collapsed {

  width: 85px;

}


.sidebar.collapsed .sidebar-header .toggler{

  transform: translate( -4px, 65px);


}

.sidebar.collapsed .sidebar-header .toggler span{

  transform: rotate(180deg);

}

//This is the JavaScript code. When the button is pressed, it adds the collapsed class to the element.

 function myfunction() {

const sidebarToggler = document.querySelector(".sidebar-toggler");
const sidebar = document.querySelector(".sidebar");
sidebarToggler.addEventListener("click", () => {
    console.log("button pressed");
    sidebar.classList.toggle("collapsed");
    
})
}

WebCC.start(
  // callback function; occurs when the connection is done or failed. 
  // "result" is a boolean defining if the connection was successfull or not.
  function (result) {
    if (result) {
      console.log('connected successfully');
      myfunction();

      WebCC.onPropertyChanged.subscribe(setProperty);
    }
    else {
      console.log('connection failed');
    }
  },
  // contract (see also manifest.json)
  {

i don't know how to delete this comment

Hi Murof, 

Thank you for your replied.

I checked the application examples but i couldnt find any informations about my question.

I know that Wincc Unifed doesn't access to the standard DOM. That's why some method like “classList.toggle()” doesnt' work. 

In visual studio code this script works: 

const sidebarToggler = document.querySelector(".sidebar-toggler");
const sidebar = document.querySelector(".sidebar");
sidebarToggler.addEventListener("click", () => {
   console.log("button pressed");
   sidebar.classList.toggle("collapsed");})

So when i press the button it activate every css element have “collapsed”.

In wincc unifed it wont work.

A solution could be a script like this:

const sidebarToggler = document.querySelector(".sidebar-toggler");
const sidebar = document.querySelector(".sidebar");
sidebarToggler.addEventListener("click", () => {
   console.log("button pressed");
   var enableCssElement = true ;})

if (enableCssElement === true) {

let myClass = document.getElementsByClassName('myClass');

for(var i=0; i <myClass.length; i ++) 
{
        var str                     = myClass[i].innerHTML;
                                    myClass[i].style.width = "400px";
                                  myClass[i].style.height ="400px";
                                    myClass[i].style.setProperty('--body-background-color', '#D5D5D5');                             
}

}

but it's very laborious.

EDIT:

i found my error, 

it worked also with the firs solution.

Murof

Hello daniel_salvini

Check also the application examples in Siemens Website, because there are some useful information for creating CWCs:

https://support.industry.siemens.com/cs/de/en/view/109794040

 

Bye Murof