topic Re: WAB Dev Edition: how do I customize widget sidebars class names? in Web AppBuilder Custom Widgets Questions

WAB Dev Edition: how do I customize widget sidebars class names?

FrancescoTonini2 — Wed, 24 Jan 2018 20:05:33 GMT

Hello,

I am trying to tweak the class names of my widget sidebar elements within a WAB Dev Edition templated app. For example (see image below), I would like to locate and edit the class name of the following element:

<div class="title-label" data-dojo-attach-point="titleLabelNode" title="Add Systems" style="line-height: 35px;">Add Systems</div>

When I do a full search for "title-label" or class = "title-label" inside my entire web app folder and files, I cannot locate the corresponding CSS class name, nor the file where the <div> with that class name is. Am I looking for the wrong item? Any help or pointer is much appreciated!

Re: WAB Dev Edition: how do I customize widget sidebars class names?

RobertScheitlin__GISP — Wed, 24 Jan 2018 20:16:21 GMT

Francesco,

You can find the css file and rule very quickly using the browsers developer tools at your disposal (see the image below).

Re: WAB Dev Edition: how do I customize widget sidebars class names?

FrancescoTonini2 — Wed, 24 Jan 2018 20:25:07 GMT

Robert,

So if I wanted to tweak the title-label class and give my own name to it, I would have to modify the

.jimu-foldable-panel .title-label {

}

chunk of code with something like .jimu-foldable-panel .title-label-2 {} correct? Since I am going to also change the class reference in the corresponding <div> element shown in the browser dev tools, how can I locate that <div>? I searched for that element but for some reason did not find it...

Re: WAB Dev Edition: how do I customize widget sidebars class names?

RobertScheitlin__GISP — Wed, 24 Jan 2018 20:45:42 GMT

Francesco,

So what are you wanting to change? If you are looking to change the text then just change the label of the widget in the widgets settings dialog.

Re: WAB Dev Edition: how do I customize widget sidebars class names?

FrancescoTonini2 — Wed, 24 Jan 2018 20:54:19 GMT

Robert,

Because of a separate in-app flow tutorial provider I am using with my web app, I was told I need to give my widget panels a unique class names. So, instead of having a generic "title-label" class for each of my widget panels that open when I click on them, I would like to manually edit the class names and call them something like "title-label-1", "title-label-2", etc. To do so, I need to locate the corresponding CSS file (which you pointed me to) where I can add my own .title-label- blocks as well as locate the corresponding sidebar <div> so I can have something like

<div class="title-label-1" data-dojo-attach-point="titleLabelNode" title="Add Systems" style="line-height: 35px;">Add Systems</div>

for my "Add Systems" widget panel

<div class="title-label-2" data-dojo-attach-point="titleLabelNode" title="Upload Systems from File" style="line-height: 35px;">Upload Systems from File</div>

for my "Upload Systems from File" widget panel etc. etc. Basically, have a unique class identifier for each of my widget panels that currently has a generic "title-label" class name. The issue is that I cannot locate any of the <div> elements above to manually change the class names as well...

Re: WAB Dev Edition: how do I customize widget sidebars class names?

RobertScheitlin__GISP — Wed, 24 Jan 2018 21:04:58 GMT

Francesco,

I am afraid you are going to have a hard time with that. The class name is controlled by the themes widget frame. For example the Foldable themes pannels > FoldablePanel > FoldableDijit.js is where the div with class="title-label" exists but if you make changes there it affects all the apps widgets that use that code.

Re: WAB Dev Edition: how do I customize widget sidebars class names?

FrancescoTonini2 — Thu, 25 Jan 2018 14:53:44 GMT

I see...so I might have to give up on customizing the class names for each separate sidebar. I thought that changing the CSS elements and the corresponding <div> would be doable for individual widget sidebars, not affecting the entire app like you are saying..