Join our Community in its new Home - The Datorama Trailblazer Community Group!

It's been an amazing 3 years coming together in this forum to collaborate, innovate, support, and inspire each other about our shared usage of Datorama. While this is not quite a goodbye, we are excited to announce that we are getting a fresh start in our new home within the Salesforce Trailblazer Community. We have a ton of fun new content planned and you may even see the revival of some of our most popular posts from the past few years.

We’ll be keeping this group around for a bit for you to peruse, but as of November 15, we will no longer be allowing new posts or comments. Be sure to join our new group at https://www.salesforce.com/success-datorama to keep the conversation going.

We can’t wait to see you there!

Want to beautify your switch measurement/dimension widget? Read This!

KatyaPeshkovKatyaPeshkov Tel Aviv, IsraelRND_ADMIN IMG42
We all know how the switch measurement/dimension widget looks like - something like this:


But what if we want to upgrade these plain looking buttons and make them look much cooler?
Well, now we can do it simply by adding some CSS code to the Custom CSS section in the widget!

:host .list-item{
  margin-right: 5px !important;
  background-color: #ffffff !important;
  border: 2px solid #007676 !important;
  border-radius: 15px !important;
  padding: 5px;
  height: 30px !important;
}

:host .list-item.active{
  background-color: #007676 !important;
  color: #ffffff !important;
}

:host .clean-list{
  height: 35px;
  margin-top: 0px !important;
}

:host .item-label{
  padding: 7px 7px !important;
  font-weight: bold;
}

This is what we get:


You can customise the code yourself in order to change the font, sizes, border and colors however you want.

* .list-item represents the button container. this is how to button looks like by default.
.list-item.active represent a selected button. 
* .clean-list represents the container of the buttons. if we make the buttons larger, we need to make the height of this container bigger as well. 
.item-label represents the text inside the button.

Try to customise your widgets as well and share with us your results! :)



Comments

  • MarissbcMarissbc New YorkSYS_ADMIN IMG42
    @KatyaPeshkov I'm working on incorporating the beautiful buttons on some of my pages! Do you know how I would adjust the window size of the switch dimension to show all of the buttons (in the vertical and horizontal layout) - in the case when there are many?

  • KatyaPeshkovKatyaPeshkov Tel Aviv, IsraelRND_ADMIN IMG42
    here's 2 steps your can try to achieve this: 
    1. simply pull the widget down using the UI
    2. under . .clean-list  class, make the height larger

    Let me know if it helped :)
  • MarissbcMarissbc New YorkSYS_ADMIN IMG42
    @KatyaPeshkov Yes, that worked perfectly! Thank you! :smile:

  • KatyaPeshkovKatyaPeshkov Tel Aviv, IsraelRND_ADMIN IMG42
    @Marissbc great! glad to hear that :)
  • MarissbcMarissbc New YorkSYS_ADMIN IMG42
    Hi @subendu29 !

    Yes, of course it is possible to specify which value takes the style change. 

    .list-item:nth-child(2)
    {
      border: 1px solid #7D7D7D !important;
      height: 25px !important;
      border-radius: 5px !important;
      background-color: #dbdbdb !important;
    }

    The sample code above for example would only style the second selection in the switch dimension. Use the following snippet for the class name where x is the desired switch dimension order in the dropdown:

    ".list-item:nth-child(x)" 

    I hope that is helpful!
    Marissa
  • MarissbcMarissbc New YorkSYS_ADMIN IMG42
    Hi @abt399

    We can actually define more user friendly names on both measurements and dimensions in both switch measurement or switch dimension widgets. 

    Simply open up the Data tab on both widget types and define a new name for the measurement or dimension under Display Name.  See the examples below, specifically for CPC! 





    This will change the text in the boxes in both widget types.

    I hope this helps!!

    Thank you!
    Marissa
  • MarissbcMarissbc New YorkSYS_ADMIN IMG42
    Hi @abt339!

    Oh, thank you for clarifying and apologies if I misled!  Yes, it is totally possible to change the dimension names in an interactive filter but the process may be a bit tedious depending on the setup. 

    To change the names of dimension values, go to Dimension Explorer under the Connect & Mix tab.  From the top selection bar, select the Entity under which the dimension is contained (i.e., Creative, Exchange, Campaign, etc.).  After the entity is selected, the dimensions will populate in the table and from there it is possible to select the dimension values (double-click them) and change their names. Note that this will change their names everywhere in the workspace, not just the page-level interactive filter dropdown menu.

    I'm including more information on the Dimension Explorer here

    I hope this helps!!

    Thank you!
    Marissa
Sign In or Register to comment.