Button group.

[Megan]

Hello Sondra,

Yes, I had the same issue but I have not found a solution to it yet. I can continue to look into a solution to this and let you know when I have any updates for you.

Thanks,

[Sondra Jones]

Megan,

Any more on the issue when dragging button group over to designer? The weird image that it shows when dragging it over?

Also,

I have another button group that I can't get the sizing to work right either. I need to be able to make this button group bigger or smaller than what it is currently. Also, when doing so, I need to keep text and image in center of button.

HTML:

Code: Select all

<div class="iconboxIn">
	<label class="iconcontainer1">
	  <input type="radio" onclick="checkBtn(this)" name="radio" value="0"><span class="iconcheckmark1"><span><i class="fa fa-check-circle-o fa-3x fntAwePdng"></i></span><br /><span class="icontext1">Delivered</span></span>
	</label>
	<label class="iconcontainer2">
	  <input type="radio" onclick="checkBtn(this)" name="radio" value="1"><span class="iconcheckmark2"><span><i class="fa fa-times-circle-o fa-3x fntAwePdng"></i></span><br /><span class="icontext2">Not Delivered</span></span>
	</label>
	<label class="iconcontainer3">
	  <input type="radio" onclick="checkBtn(this)" name="radio" value="2"><span class="iconcheckmark3"><span><i class="fa fa-clock-o fa-3x fntAwePdng"></i></span><br /><span class="icontext3">Out For Delivery</span></span>
	</label>
	<label class="iconcontainer4">
		<input type="radio" onclick="checkBtn(this)" name="radio" value="3"><span class="iconcheckmark4"><span><i class="fa fa-circle-o fa-3x fntAwePdng"></i></span><br /><span class="icontext4">Ready For Delivery</span></span>
	  </label>	
</div>

JS: (icon button group)

Code: Select all

  pui.retrieveCustomLayoutTemplate("iconbuttongroup");

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

   defaults: {
    "width": "700",
    "height": "62" 
   },

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

         params.dom.innerHTML = html;
         //var body = params.dom.getElementsByClassName("iconbuttongroup");

         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');
            } else if (params.evalProperty("value") == "3") {
              params.dom.innerHTML = html.replace('value="3"', 'value="3" checked');
            }
          
            var swtch = params.evalProperty("value");
            params.dom.setAttribute("win-clicked", swtch);
            params.dom.setAttribute("win-customwidget","1"); 
         }

        },
      "height": function(params) {
        //if (params.design) {
          params.dom.firstChild.style.height = String(parseInt(params.value) + "px");
        //}
      },
  
      "width": function(params) {
        //if (params.design) {
          params.dom.firstChild.style.width = String(parseInt(params.value) + "px");
        //}
      },	

   }
});

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

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

   defaults: {
    "width": "700px",
    "height": "62px" 
   }
});

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

/* Icon Button Group */

/* The icon container1 */
.iconboxIn {
    display: table;
    /* table-layout: fixed; */
    /*border: 1px solid #0072cf;
    border-radius: 4px;*/
    overflow: hidden;
    width: 100%;
    height: 100%; 
	/* background-color: #0072cf; */
	padding: 0px !important;
}
.iconcontainer1 {
    /* width: 170px;
    height: 62px;   */
    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;
    border: 1px solid #cccccc;
}

.icontext1 {
   width: 100%;
   align-self: center;
   text-align: center;
   font-family: "Open Sans",Arial,Helvetica,sans-serif;
   margin-left: -97px !important;
   margin-top: 39px !important;
}

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

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

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

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

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

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

/* The icon container2 */
.iconcontainer2 {
    /* width: 170px;
    height: 62px;     */
    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;
    border: 1px solid #cccccc;
}

.icontext2 {
   width: 100%;
   align-self: center;
   text-align: center;
   font-family: "Open Sans",Arial,Helvetica,sans-serif;
   margin-left: -97px !important;
   margin-top: 39px !important;
}

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

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

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

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

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

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

/* The icon container3 */
.iconcontainer3 {
    /* width: 170px;
    height: 62px;   */
    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;
    border: 1px solid #cccccc;
}

.icontext3 {
   width: 100%;
   align-self: center;
   text-align: center;
   font-family: "Open Sans",Arial,Helvetica,sans-serif;
   margin-left: -97px !important;
   margin-top: 39px !important;
}

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

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

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

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

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

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

/* The icon container4 */
.iconcontainer4 {
    /* width: 170px;
    height: 62px;  */
    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;
    border: 1px solid #cccccc;
}

.icontext4 {
   width: 100%;
   align-self: center;
   text-align: center;
   font-family: "Open Sans",Arial,Helvetica,sans-serif;
   margin-left: -97px !important;
   margin-top: 39px !important;
}

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

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

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

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

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

/* Create the indicator (the dot/circle - hidden when not checked) */
.iconcheckmark4:after {
    content: "";
    position: absolute;
    display: none;
}
.fntAwePdng {
    font-size: 3em;
    margin-left: 71px !important;
    margin-top: 5px;
}
/*--------------------------------------------------------------------------------------------*/
/*End Button Group Styles*/

[Megan]

Hello Sondra,

In regards to the line issue, I have determined that the issue is that the template is being used as the proxy image. please try the following alternative to your pui.toolbox.add():

Code: Select all

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

   proxyHeight: 50,
   proxyWidth: 200,
   proxyHTML: '<div class="boxIn" style="width: 200px; height: 50px;"><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>',

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

I'll will now be looking into your new question.

Thanks,

[Megan]

Hello Sondra,

I made some edits to your icon button code. The following gifs show my results (the colloring is off because of the gif compression):

StretchyCorrectedButtons.gif (985.21 KiB) Viewed 2902 times

CorrectedButtons.gif (114.3 KiB) Viewed 2902 times

And the code (I made edits to each so please use them all together):

HTML:

Code: Select all

<div class="icnBoxGrp">
    <label class="icnBox deliveredBox">
        <input type="radio" onclick="checkBtn(this)" name="radio" value="0">   
        <div class="icnMrkBox fa fa-3x">
            &#xf05d;<br/><span class="icnTxtBox"><br/>Delivered</span>
        </div>
    </label>
    <label class="icnBox notDeliveredBox">
        <input type="radio" onclick="checkBtn(this)" name="radio" value="1">   
        <div class="icnMrkBox fa fa-3x">
            &#xf05c;<br/><span class="icnTxtBox">Not<br/>Delivered</span>
        </div>
    </label>
    <label class="icnBox inDeliveryBox">
        <input type="radio" onclick="checkBtn(this)" name="radio" value="2">   
        <div class="icnMrkBox fa fa-3x">
            &#xf017;<br/><span class="icnTxtBox">Out for<br/>Delivery</span>
        </div>
    </label>
    <label class="icnBox deliveryReadyBox">
        <input type="radio" onclick="checkBtn(this)" name="radio" value="3">   
        <div class="icnMrkBox fa fa-3x">
            &#xf10c;<br/><span class="icnTxtBox">Ready for<br/>Delivery</span>
        </div>
    </label>
</div>

JS:

Code: Select all

pui.retrieveCustomLayoutTemplate("iconbuttongroup");

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

	defaults: {
		"width": "700",
		"height": "62",
        "class": "iconboxIn"
	},

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

			params.dom.innerHTML = html;
			//var body = params.dom.getElementsByClassName("iconbuttongroup");

			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');
				} else if (params.evalProperty("value") == "3") {
					params.dom.innerHTML = html.replace('value="3"', 'value="3" checked');
				}

				var swtch = params.evalProperty("value");
				params.dom.setAttribute("win-clicked", swtch);
				params.dom.setAttribute("win-customwidget", "1");
			}

		},
		"height": function (params) {
			//if (params.design) {
			params.properties["height"] = params.value;
			params.dom.style.height = params.value + "px";
			//}
		},

		"width": function (params) {
			//if (params.design) {
			params.properties["width"] = params.value;
			params.dom.style.width = params.value + "px";
			//}
		},

	}
});

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

	proxyHeight: 62,
	proxyWidth: 200,
	proxyHTML: pui.layout.templates["iconbuttongroup"],

	defaults: {
		"width": "200px",
		"height": "62px",
        "class": "iconboxIn"
	}
});

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

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

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

/* BUTTON GROUP BOX */
.icnBoxGrp {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 9px;
    box-sizing: border-box;
}

/* ICON BOX*/
.icnBox {
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
        
    overflow: hidden;    
    height: 100%;
    width:100%;
    font-size: 13px;
    box-sizing: border-box;
    
	border: 2px solid #0072cf;
}

/* INDIVIDUAL ICON BOXES */
.icnBox:nth-child(1) {
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
	border-right: 1px solid #0072cf;
    
	background-color: white;
	color: #093;
    
	text-align: center;
}
.icnBox:nth-child(2) {
	border-left: 1px solid #0072cf;
	border-right: 1px solid #0072cf;
    background-color: white;
	color: #c00;
	
    text-align: center;
}
.icnBox:nth-child(3) {
	border-left: 1px solid #0072cf;
	border-right: 1px solid #0072cf;
    
	background-color: white;
	color: #d8c726;
	
    text-align: center;
}
.icnBox:nth-child(4) {
	border-left: 1px solid #0072cf;
    
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    
	background-color: white;
	color: #0072cf;
    
	text-align: center;
}

/* HOVER EVENT */
.icnBox:nth-child(1):hover {
	color: #007025;
	border-color: #004883;
}
.icnBox:nth-child(2):hover {
	color: #a30000;
	border-color: #004883;
}
.icnBox:nth-child(3):hover {
	color: #b5a720;
	border-color: #004883;
}
.icnBox:nth-child(4):hover {
	color: #004883;
	border-color: #004883;
}

/* CHECKED EVENT */
.icnBox:nth-child(1) input:checked~.icnMrkBox {
	background-color: #093;
	color: #fff;
	border-color: #093;
}
.icnBox:nth-child(2) input:checked~.icnMrkBox {
	background-color: #c00;
	color: #fff;
	border-color: #c00;
}
.icnBox:nth-child(3) input:checked~.icnMrkBox {
	background-color: #d8c726;
	color: #fff;
	border-color: #d8c726;
}
.icnBox:nth-child(4) input:checked~.icnMrkBox {
	background-color: #0072cf;
	color: #fff;
	border-color: #0072cf;
}


/* ALTERNATE CHECKMARK DESIGN*/
.icnBox > input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
    left: -1000px;
}

.icnMrkBox {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-evenly;
    box-sizing: border-box;
    text-align: center;
    word-wrap: normal;
    width: 100%;
    height: 100%;
}

.icnTxtBox {    
	font-weight: bold;
    text-align: center;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 13px;
}

I hope this helps! If you would like explanation for any particular changes, I'll be happy to explain them to you. If you have any questions or concerns, please let us know!

Thanks,

[Sondra Jones]

Hi Megan,

Thank you so much for your input. Why did you have to redo the code completely? Could you not use the exact code I had in place and make changes in order for the button to be sized bigger or smaller?

I prefer to keep code as it was if possible.

However, I did go ahead and implement the code you suggested for all objects and while it seems to be correct (besides a few things are not, such as border and when it gets put on screen it is not correct size), but the biggest concern is when I make it bigger, and then launch preview the changes are not staying.

So, can we try to keep my code as it was? And figure out how to size it bigger or smaller while keeping text and image centered no matter the size of the button group?

- Sondra

[Megan]

Hello Sondra,

In order to more easily work with your CSS, I condensed it into a more manageable set of classes for myself. Please, feel free to manipulate the classes as you need. I made only minor changes to the JavaScript to correct some things. I reduced the size of the button group on drop down but you are welcome to change that to the size you were originally using, which was 700x62px, I believe. I restructured the HTML in order to have better control with the CSS and to also condense the required CSS. I changed the Font Awesome objects into their Unicode format because the Font Awesome objects were not cooperating.

A list of the Font Awesome Unicode can be found here: http://astronautweb.co/snippet/font-awesome/

An example of using them inline:
Listed: \f05d => Inline Use: 
Required Class: fa

Using the class instead of the inline Unicode creates a ::before object that I was having trouble dealing with to get it centered.

And lastly, I added <br> tags in order to force the text of each option to be two lines, this was because the text would not wrap the way that I wanted. So I forced it to wrap.

To ensure that the correct proxy size occurs, you can do as I did for your previous button group and replace the use of a template with the use of HTML.

icnBtnGrp.gif (1.14 MiB) Viewed 2897 times

Here is the changed code for the above image:
HTML:

Code: Select all

<div class="icnBoxGrp">
    <label class="icnBox deliveredBox">
        <input type="radio" onclick="checkBtn(this)" name="radio" value="0">   
        <div class="icnMrkBox fa fa-3x">
            &#xf05d;<br/><span class="icnTxtBox">Delivered</span>
        </div>
    </label>
    <label class="icnBox notDeliveredBox">
        <input type="radio" onclick="checkBtn(this)" name="radio" value="1">   
        <div class="icnMrkBox fa fa-3x">
            &#xf05c;<br/><span class="icnTxtBox">Not Delivered</span>
        </div>
    </label>
    <label class="icnBox inDeliveryBox">
        <input type="radio" onclick="checkBtn(this)" name="radio" value="2">   
        <div class="icnMrkBox fa fa-3x">
            &#xf017;<br/><span class="icnTxtBox">Out for Delivery</span>
        </div>
    </label>
    <label class="icnBox deliveryReadyBox">
        <input type="radio" onclick="checkBtn(this)" name="radio" value="3">   
        <div class="icnMrkBox fa fa-3x">
            &#xf10c;<br/><span class="icnTxtBox">Ready for Delivery</span>
        </div>
    </label>
</div>

JS:

Code: Select all

pui.retrieveCustomLayoutTemplate("iconbuttongroup");

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

	defaults: {
		"width": "700px",
		"height": "62px",
        "class": "iconboxIn"
	},

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

			params.dom.innerHTML = html;
			//var body = params.dom.getElementsByClassName("iconbuttongroup");

			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');
				} else if (params.evalProperty("value") == "3") {
					params.dom.innerHTML = html.replace('value="3"', 'value="3" checked');
				}

				var swtch = params.evalProperty("value");
				params.dom.setAttribute("win-clicked", swtch);
				params.dom.setAttribute("win-customwidget", "1");
			}

		},
		"height": function (params) {
			//if (params.design) {
			params.properties["height"] = params.value;
			params.dom.style.height = params.value + "px";
			//}
		},

		"width": function (params) {
			//if (params.design) {
			params.properties["width"] = params.value;
			params.dom.style.width = params.value + "px";
			//}
		},

	}
});

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

	proxyHeight: 62,
	proxyWidth: 700,
	proxyHTML: '<div style="height: 62px; width: 700px;" class="icnBoxGrp"><label class="icnBox deliveredBox"><input type="radio" onclick="checkBtn(this)" name="radio" value="0"><div class="icnMrkBox fa fa-3x">&#xf05d;<br/><span class="icnTxtBox">Delivered</span></div></label><label class="icnBox notDeliveredBox"><input type="radio" onclick="checkBtn(this)" name="radio" value="1">           <div class="icnMrkBox fa fa-3x">&#xf05c;<br/><span class="icnTxtBox">Not Delivered</span></div></label><label class="icnBox inDeliveryBox"><input type="radio" onclick="checkBtn(this)" name="radio" value="2"><div class="icnMrkBox fa fa-3x">&#xf017;<br/><span class="icnTxtBox">Out for Delivery</span></div></label><label class="icnBox deliveryReadyBox"><input type="radio" onclick="checkBtn(this)" name="radio" value="3"><div class="icnMrkBox fa fa-3x">&#xf10c;<br/><span class="icnTxtBox">Ready for Delivery</span></div></label></div>',

	defaults: {
		"width": "700px",
		"height": "62px",
        "class": "iconboxIn"
	}
});

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

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: No changes.

This may not be exactly what you looking for your final version of your icon button group, this is an example of possible solutions for your issue. My point in saying to take the code as a whole was so that you could view what I was viewing since due to me making changes. You are welcome to use the code as you like, whether that means taking it as a whole or copying parts to your existing code or even just using it as a learning tool. If you would like me to explain why I used flex instead of table display or any other specifics, please let me know and I will be happy to give you more information about my approaches. If you are looking for us to design this widget to your exact specifications rather than providing these examples of possible approaches, please refer to Scott's comments about hiring us to do that.

Thanks,

[Sondra Jones]

No I was not asking you to design the widget for us. I have already designed the widget and was having issues with the sizing of that widget. So that is why I was asking for your input on this as we have been instructed to do so.

I will look at your suggested code and see if that works better. I understand I will need to make changes to your suggestion as the color format does not follow what I need. That is fine.

When I looked at your first suggestion, it was not working when I made the button group larger and then launched the preview. That was my main concern when responding back to you.

I will try your new suggestion to see if that in fact holds changes when I launch preview.

Thanks,

Sondra

[Sondra Jones]

I am still having an issue when I am launching the preview.

No matter what size I make the button group in the designer, it does not hold any thing when launching the preview.

Did you test that out on your side?

[Megan]

Hello Sondra,

Yes. This does display properly for me in Preview mode. Can you check for any conflicts? If you have both your code and my code on your system, they may be conflicting with each other due to duplicate names. Could you please show me what you are seeing? Could you also try clearing the cache of your browser? The shortcut to do this in Chrome is CTRL + Shift + DEL.

previewMode.png (23.5 KiB) Viewed 2895 times

Thanks,