Layers in Service Studio

  

Hi Guys,


Quite recently I’ve received a question from a customer of How can we use Service Studio to have a layered development approach?


The immediate answer is you can’t. However Service Studio has a built in feature that allows you to add a prefix to the attributes inside a css class that will only be used inside Service Studio and removed in runtime. (-servicestudio-XXXX )


This got me thinking and with the help of Gonçalo Borrega I decided to write a small “Tutorial” of how you can achieve this inside service studio.


Let’s assume that I have a SILK UI based page with two columns and I wish to treat the elements inside each column as separate layers. How can I do it:


  1. Create a wrapper div around the content to consider and a wrapper around each conceptual layer. Associate the style Layer1, Layer2 to each conceptual layer

     



  1. Define the following classes:

div.Layer1, div.Layer2 {
    -servicestudio-display: none !important;
}

.Layer1Visible div.Layer1 {
    -servicestudio-display: block !important;
}

.Layer2Visible div.Layer2 {
    -servicestudio-display: block !important;
}
Note: The important on the display element is necessary to force ServiceStudio to apply it. If you can't "see" an element use the widget tree to spot it.
 
  1. Associate the class LayerXVisible to the element to toggle the visibility of the contents of the layer





Hope this helps with this approach.

Cheers,
Guilherme