Skip to main content

This content is closed to future replies and is no longer being maintained or updated.
Links may no longer function. If you have a similar request, please write a new post.

Question

 Rohit Singh (Rohit_Singh)
Ncs Pte Ltd

Ncs Pte Ltd
SG
Rohit_Singh Member since 2016 6 posts
Ncs Pte Ltd
Posted: Jan 11, 2018
Last activity: Jan 17, 2018
Posted: 11 Jan 2018 4:48 EST
Last activity: 17 Jan 2018 6:12 EST
Closed
Solved

How to show Checkbox as a slider

I want to show few checkbox in application as a slider or switch with TrueFalse. I have CSS for the slider. Can Anyone help how to use this css in pxCheckbox


.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

.switch input {display:none;}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: #2196F3;
}

input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

To see attachments, please log in.
Dev/Designer Studio
User Experience

  • Nalumachu Anudeep

Accepted Solution

Posted: 7 years ago
Posted: 11 Jan 2018 6:47 EST
Veera Durga Bhanuja Singuluri (Durga_Bhanuja) Senior Technical Solutions Engineer
Pegasystems Inc.
IN
Hi Rohit, Thanks for posting queries in PSC. I hope you got this css from below article https://codepen.io/AllThingsSmitty/pen/MmxxOz If you go through this above example you see the HTML file with the container structure of the checkbox as a slider. In css with respective to elements they applied the styles. In the same we have to customise the checkbox control and apply the css. To apply the css for checkbox control follow below steps: 1) Get the Id/class of the checkbox and the parent element by inspecting it using developer tools. 2) replace with class/id of that parent element and the checkbox in the above css you shared and place it in the userworkform I hope this information helps you Thanks &Regards, Durga
To see attachments, please log in.

Accepted Solution

Posted: 7 years ago
Posted: 11 Jan 2018 6:47 EST
Veera Durga Bhanuja Singuluri (Durga_Bhanuja) Senior Technical Solutions Engineer
Pegasystems Inc.
IN
Hi Rohit, Thanks for posting queries in PSC. I hope you got this css from below article https://codepen.io/AllThingsSmitty/pen/MmxxOz If you go through this above example you see the HTML file with the container structure of the checkbox as a slider. In css with respective to elements they applied the styles. In the same we have to customise the checkbox control and apply the css. To apply the css for checkbox control follow below steps: 1) Get the Id/class of the checkbox and the parent element by inspecting it using developer tools. 2) replace with class/id of that parent element and the checkbox in the above css you shared and place it in the userworkform I hope this information helps you Thanks &Regards, Durga
To see attachments, please log in.
Posted: 7 years ago
Posted: 11 Jan 2018 7:57 EST
Rohit Singh (Rohit_Singh)
Ncs Pte Ltd

Ncs Pte Ltd
SG

Hi Durga,

Thanks for the Reply,

I added this css in skin included style and saved as deprecated Checkbox control ,added the class but check box functionality is not work

Show More

Hi Durga,

Thanks for the Reply,

I added this css in skin included style and saved as deprecated Checkbox control ,added the class but check box functionality is not work

<pega:when java='<%=  !tools.getParamValue("ReadOnlySmartInfo").equals("") || !tools.getParamValue("ReadWriteSmartInfo").equals("")  %>'>
	<pega:include name="StartSmartField"/>
</pega:when>

<pega:save name="strRefName" ref="$this-name" />
<pega:save name="strValue" ref="$this-value" />
<pega:save name="strPropName" ref="$this-Definition(pyPropertyName)"/>

<pega:choose>
<pega:when test='$mode-input'>
	<%
	tools.putSaveValue("isEditable","true");
	%>
</pega:when>
<pega:otherwise>
	<%
	tools.putSaveValue("isEditable","false");
	%>
</pega:otherwise>
</pega:choose>

<pega:include name="Messages" />

<%
	if(tools.getParamValue("AlwaysEditable").equalsIgnoreCase("true"))
		tools.putSaveValue("isEditable","true");
%>

<pega:choose>
	<pega:when java='<%= !tools.getSaveValue("isEditable").equalsIgnoreCase("true")%>'>
	<pega:when test='$this-value=="true"'>
			<% 
			 String LocalizedCheckedLabel = tools.getLocalizedTextForString(".pyMessageLabel", "Checked"); 
			 %>
			<img src="desktopimages/checkmark.gif" alt="<%=LocalizedCheckedLabel%>" 
			title="<%=LocalizedCheckedLabel%>" border="0">
		</pega:when>
	</pega:when>
	<pega:otherwise>
		<input type="hidden" value="false" name="<p:r n='$save(strRefName)'/>" />
      <label class="switch">
		<input type="checkbox" value="true" name="<p:r n='$save(strRefName)'/>" />
               <span class="slider round"></span>
</label> 
					<pega:when java='<%= !tools.getSaveValue("isGrid").equalsIgnoreCase("true") %>' >
						id="<p:r n='$save(strPropName)'/><%=tools.getParamValue("pega_RLindex")%>" 
					</pega:when>
					<pega:include name="ClientValidation"/>
					<pega:when test='$this-value=="true" || $this-value=="-1"'> checked="true" 	</pega:when>
					<pega:when test='$this-value=="True"'> checked="true" 	</pega:when>
					<pega:when java='<%=tools.getSaveValue("isGrid").equalsIgnoreCase("true") %>' >
						onclick="Grids.getActiveGrid(event).checkAllIfInHeader(this, event);" 
						id="gridCheckBox"
					</pega:when>
					title ="<%= StringUtils.crossScriptingFilter(tools.getLocalizedTextForString("pyToolTip",tools.getParamValue("ToolTip")))%>"
					class="checkbox" />
	</pega:otherwise>
</pega:choose>
<pega:when java='<%=  !tools.getParamValue("ReadOnlySmartInfo").equals("") || !tools.getParamValue("ReadWriteSmartInfo").equals("")  %>'>
	<pega:include name="EndSmartField"/>
</pega:when>

 

Added these only

<label class="switch">
<input type="checkbox" value="true" name="<p:r n='$save(strRefName)'/>" />
               <span class="slider round"></span>
</label> 

Show Less
To see attachments, please log in.
Posted: 7 years ago
Posted: 11 Jan 2018 6:47 EST
Rachit Agarwal (Rachit_Agarwal)
PEGA
Principal Technical Support Engineer
Pegasystems Inc.
US

Hi, 

You can have a non-autogenerated section where you can create an input element as given in the below link. You can give the css also in the non-autogenerated section.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch

Or you can create a checkbox control and add the same code provided in this link. You might have to modify the code as per your requirement. Please let me know if this resolves your issue.

Regards,

Rachit

To see attachments, please log in.

We'd prefer it if you saw us at our best.

Pega Collaboration Center has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice