Button group.

[Sondra Jones]

Hi Megan,

I am not sure I am following how your css and html is going with the js file. To me this looks differently then how I was told to do it earlier in this post. I will put our code below.

JS file:

Code: Select all

pui.retrieveCustomLayoutTemplate("buttongroup");

pui.addCustomProperty({
    name: "buttongroup",
    help: "",
    controls: ["buttongroup","btn-group win-button-group","btn btn-default win-button win-button-secondary"],
    category: ""
  });
pui.widgets.add({
    name: "button group",
    newId: "buttongroup",
    
    defaults: {
      "width": "",
      "height":""

      
    },
  
    propertySetters: {
      "field type": function(params) {
  
        var html = pui.layout.templates["buttongroup"];
        params.dom.innerHTML = html;
        //var body = params.dom.getElementsByClassName("buttongroup");

        if (params.design) {
          params.dom.innerHTML = html.replace('value="0"', 'value="0" focus');
          params.dom.setAttribute("win-clicked", "0");
        } else {
          if (params.evalProperty("value") == "0") {
            params.dom.innerHTML = html.replace('value="0"', 'value="0" checked');
          } else if (params.evalProperty("value") == "1") {
            params.dom.innerHTML = html.replace('value="1"', 'value="1" checked');
          } else if (params.evalProperty("value") == "2") {
            params.dom.innerHTML = html.replace('value="2"', 'value="2" checked');
          }
  
           var swtch = params.evalProperty("value");
           params.dom.setAttribute("win-clicked", swtch);
           params.dom.setAttribute("win-customwidget","1"); 
                   
          addEvent(params.dom, "click", function() {
              params.dom.setAttribute("win-clicked", swtch);
              //alert(document.getElementById("buttongroup1"), "options")));
            }); 
        }
      },
    }
});

  pui.toolbox.add({
    category: "CSS Buttons",
    widget: "button group",
    text: "Button Group",
    value:"test",
  
    proxyHeight: 23,
    proxyWidth: 72,
    proxyHTML: pui.layout.templates["buttongroup"],
  
    defaults: {
      "width": "",
      "height": "",
     }
  });


  function checkBtn(thing) {
    var html = pui.layout.templates["buttongroup"];
    document.innerHTML = html;
    
    if (thing.value == "0") {
      document.innerHTML = html.replace('value="0"', 'value="0" checked');
    } else if (thing.value == "1") {
      document.innerHTML = html.replace('value="1"', 'value="1" checked');
    } else if (thing.value == "2") {
      document.innerHTML = html.replace('value="2"', 'value="2" checked');
    }    
  }

html file:

Code: Select all

<div class="btn-group" role="group">
  <button id="option1" onclick="checkBtn(this)" type="radio" name="options" class="btn btn-default win-button win-button-secondary" value="0">Left</button>
  <button id="option2" onclick="checkBtn(this)" type="radio" name="options" class="btn btn-default win-button win-button-secondary" value="1">Middle</button>
  <button id="option3" onclick="checkBtn(this)" type="radio" name="options" class="btn btn-default win-button win-button-secondary" value="2">Right</button>
</div>

CSS file:

Code: Select all

/*Button Style*/
.win-button {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	user-select: none;
	background-image: none;
	border-radius: 4px;
	min-width: 150px;
}

.win-button-primary {
	color: #fff;
	background-color: #0072cf;
	border: 1px solid #0072cf;
}

.win-button-primary:hover {
	background-color: #00569c;
	border: 1px solid #00569c;
}

.win-button-primary:active {
	background-color: #00569c;
	border: 1px solid #00569c;
	box-shadow: none;
}

.win-button-secondary {
	color: #0072cf;
	background-color: #fff;
	border: 1px solid #0072cf;
}

.win-button-secondary:hover {
	color: #004883;
	border: 1px solid #004883;
}

.win-button-secondary:active {
	color: #004883;
	border: 1px solid #004883;
	box-shadow: none;
}

.win-button-tertiary {
	color: #fff;
	background-color: #c00;
	border: 1px solid #c00;
}

.win-button-tertiary:hover {
	background-color: #b30000;
	border: 1px solid #b30000;
}

.win-button-tertiary:active {
	background-color: #900;
	border: 1px solid #900;
	box-shadow: none;
}

.win-button-big {
	min-height: 50px;
	font-size: 18px;
	border-radius: 6px;
	border-width: 2px;
}

.win-button-big:hover {
	border-width: 2px;
	cursor: pointer;
}

.win-button:disabled {
	cursor: not-allowed;
	opacity: .65;
}	

.win-button-big:disabled {
	cursor: not-allowed;
	opacity: .65;
}

.win-button-primary[disabled = true] {
	color: #fff;
  	background-color: #0072cf;
	border: 1px solid #0072cf;
}

.win-button-secondary[disabled = true] {
	color: #0072cf;
	background-color: #fff;
	border: 1px solid #0072cf;
}

.win-button-tertiary[disabled = true] {
	color: #fff;
	background-color: #c00;
	border: 1px solid #c00;
}

.win-button-big[disabled = true] {
    border-width: 2px;
    cursor: not-allowed;
}

.win-action-button {
	border: 1px solid #ccc;
	font-size: 17px;
	border-radius:25px;
	height: 34px;
	color: #0072cf;
	background: #fff;
	padding: 4px 12px;
	font-weight: normal;
	text-align: center;
	display: inline-block;
	margin-bottom: 0px;
	white-space: nowrap;
	user-select: none;
}

.win-action-button:hover {
	color: #0072cf;
	border-color: #0072cf;
}

.win-action-button:active {
	color: #0072cf;
	border-color: #0072cf;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.125);
	background-image: none;
}

.win-action-button:disabled {
	cursor: not-allowed;
	opacity: .65;
}

.win-action-button[disabled = true] {
	color: #0072cf;
	background-color: #fff;
	border: 1px solid #ccc;
}

.win-close-icon {
	color: gray; /*TODO:*/
	font-family: "FontAwesome";
	font-size: 24px;
}

.win-image{
	background-position: 13px;
}

.win-button.win-action-button.win-image{
	padding-left: 30px;
}
/*-------------------------------------------------------------------------------------*/
/*End Button Style*/

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-family: "Open Sans", arial, helvetica, sans-serif !important;
}

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group>.btn:first-child {
	margin-left: 0;
}

.win-button-group .btn {
	white-space: normal;
} 

.btn-group-vertical>.btn, .btn-group>.btn {
	position: relative;
	float: left;
}

.win-button-group label {
    font-weight: bold;
    font-size: 13px;
}

.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
  	font-family: "Open Sans", arial, helvetica, sans-serif !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 4px;
}

.btn-group .btn:focus {
    background-color: #0072cf;
    color: #fff;
    border: 1px solid #0072cf;
    font-family: "Open Sans", arial, helvetica, sans-serif !important;
}

[Megan]

Hello Sondra,

Yes, the example is different from the original suggestion. The code required to get the functionality you are looking for with buttons became more and more complex, so I changed the example to use radio buttons designed to look the same as your buttons in the hopes that it would be simpler and easier to follow.

In testing the new code you provided, I found that it does not work, at all. Please try the complete example I provided and see if it works for you.

Additionally, as Emily has stated before, this is custom widget and beyond the scope of the support we provide. If you have any additional questions regarding Profound UI elements or API, please let us know and we'll be happy to help!

[Sondra Jones]

Thanks Megan.

I think I was just looking at it wrong.

[Sondra Jones]

Hi Megan!

The button group is going very well for us now. However, we are running into another issue that we can't seem to figure out.

We want to be able to size the button group bigger or smaller than what it currently is. I can post all of our code here if you would like to take a look at it or if you had any thoughts on how to go about the sizing of the buttons.

Thanks!

[Megan]

Hello Sondra,

I'm glad to hear that this is working for you now! How were you hoping to resize the buttons? Having your code as well as knowing what version of Profound UI you are using would also help in testing solutions.

Thanks,

[Sondra Jones]

Hi Megan,

I want to be able to either make the button group be smaller or bigger than what it currently is. Just like you can with a CSS button.

Here is our code:

HTML:

Code: Select all

<div class="boxIn">
<label class="container">
  <input type="radio" onclick="checkBtn(this)" name="radio" value="0"><span class="checkmark"><span class="text">Left</span></span>
</label>
<label class="container">
  <input type="radio" onclick="checkBtn(this)" name="radio" value="1"><span class="checkmark"><span class="text">Middle</span></span>
</label>
<label class="container">
  <input type="radio" onclick="checkBtn(this)" name="radio" value="2"><span class="checkmark"><span class="text">Right</span></span>
</label>
</div>

JS: (button group)

Code: Select all

pui.retrieveCustomLayoutTemplate("buttongroup");

pui.addCustomProperty({
   name: "buttongroup",
   help: "",
   controls: ["buttongroup", "btn-group win-button-group", "btn btn-default win-button win-button-secondary"],
   category: ""
});
pui.widgets.add({
   name: "button group",
   newId: "buttongroup",

   defaults: {},

   propertySetters: {
      "field type": function (params) {
         var html = pui.layout.templates["buttongroup"];
         
         while(html.includes('name="radio"') == true) {
          html = html.replace('name="radio"', 'name="' + params.dom.id + '"');
         }

         params.dom.innerHTML = html;
         
         if (params.design) {
          params.dom.innerHTML = html.replace('value="0"', 'value="0" checked');
          params.dom.setAttribute("win-clicked", "0");
        } else {
            if (params.evalProperty("value") == "0") {
              params.dom.innerHTML = html.replace('value="0"', 'value="0" checked');
            } else if (params.evalProperty("value") == "1") {
              params.dom.innerHTML = html.replace('value="1"', 'value="1" checked');
            } else if (params.evalProperty("value") == "2") {
              params.dom.innerHTML = html.replace('value="2"', 'value="2" checked');
            }
          
            var swtch = params.evalProperty("value");
            params.dom.setAttribute("win-clicked", swtch);
            params.dom.setAttribute("win-customwidget","1"); 
        }
      },
   }
});

pui.toolbox.add({
   category: "CSS Buttons",
   widget: "button group",
   text: "buttongroup",
   value: "test",

   proxyHeight: 23,
   proxyWidth: 72,
   proxyHTML: pui.layout.templates["buttongroup"],

   defaults: {}
});

function checkBtn(thing) {
  thing.parentElement.offsetParent.setAttribute("win-clicked", thing.value);
}

JS: (custom function)

Code: Select all

if (typeof WinSupply === "undefined") WinSupply = {};

WinSupply.customWidgetSubmit = function(response) {
  var widgets = document.querySelectorAll("div[win-customwidget]");
  for( var i=0; i < widgets.length; i++){
    if (widgets[i].pui && widgets[i].pui.fieldName) {
       var idVar = widgets[i].pui.formatName + "." + widgets[i].pui.fieldName;
       var attr = widgets[i].getAttribute("win-clicked");
       if (attr && attr=="1") {
         response[idVar] = "1";
       }
	     else if (attr && attr=="2") {
		     response[idVar] = "2";
	     }
	     else if (attr && attr=="3") {
        response[idVar] = "3";
       } 
       else {
        response[idVar] = "0";
       }
    }
  }
  return true;
}

CSS:

Code: Select all

.boxIn {
    display: table;
    table-layout: fixed;
    border: 1px solid #0072cf;
    border-radius: 4px;
    overflow: hidden;
    width: 500px;
    height: 30px;
	/* background-color: #0072cf; */
	padding: 0px !important;
}
.container {
    display: table-cell;
    position:relative;
    cursor: pointer;
	font-size: 13px;
	font-weight: bold;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: transparent;
    vertical-align: middle;
    /* background-color: #0072cf; */
    overflow: hidden;
}

.text {
   width: 100%;
   align-self: center;
	text-align: center;
	font-family: "Open Sans",Arial,Helvetica,sans-serif;
}

/* Hide the browser's default radio button */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    display: flex;
    top: -1px;
	left: -1px;
	padding-bottom: 2px;
    height: 100%;
    width: 100%;
    background-color: white;
    color: #0072cf;
    text-align: center;
}

.container:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.container:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
} 

.container ~ .container {
    border-left: 1px solid #0072cf;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    /* background-color: #8fc9f9;
	color: white; */
	color: #004883;
    border: 1px solid #004883;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
	box-shadow: none;
    background-color: #0072cf;
    color: #fff;
    border: 1px solid #0072cf;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

I think that is it.

[Sondra Jones]

We are using version 5.13.0

[Megan]

Hello Sondra,

I have reviewed the code you have provided and have determined that setting a height and width default for your widget as well as changing the following CSS class should give you the results you are looking for.

CSS Change:

Code: Select all

.boxIn {
    display: table;
    table-layout: fixed;
    border: 1px solid #0072cf;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    height: 100%;
   /* background-color: #0072cf; */
   padding: 0px !important;
}

Added Defaults: (add to pui.toolbox.add)

Code: Select all

defaults: {
   "width": "200px",
   "height": "50px"
}

[Sondra Jones]

Megan,

These changes do in fact allow me to change the size of the button group. However, these changes do not allow the button group to be as what it was prior to these changes.

So before these changes when you drag the button group over on the screen it will be a certain size. I still want to button group to come over as that. Right now with you changes that is no longer happening.

[Sondra Jones]

Megan,

You can disregard the last message. I think I got it.

I do have another question. When I drag the button group over, its like a huge long line. It obviously does not stay that way once I put the widget on the screen but is there any way to make it not do that? Just looks kind of weird to me.