Question
CGI
IN
Last activity: 28 Apr 2016 12:50 EDT
When the arrow is hovering over the checkbox, the checkbox hovers blue
Hi,
When the arrow is hovering over the checkbox, the checkbox hovers blue
Please guide, how to achieve it.
Thanks & Regards
U Rajasekhar
Accepted Solution
Thanks for the confirmation
Pegasystems Inc.
IN
Make changes to the user skin of as same as in "pyUIGallerySkin". Also the same is been the default behaviour in PEGA 7.2 version.
Updated: 17 Apr 2016 3:22 EDT
Northbridge
CA
OnHover of the checkbox, you can have an action "set style" in which for" style class" you can provide CSS class name. Or instead, can use an "Inline Style" in "Style Source".
CGI
IN
Thanks Shruthi,
To achieve "When the arrow is hovering over the checkbox, the checkbox hovers blue"
Could please provide code in Style class cell to use
- inline style
- CSS class name
Thanks & Regards
U Rajasekhar
Hi,
This particular implementation of the checkbox is not available OOTB. The basic approach to implement is this,
Have 3 different images,
- checkbox without selection
- checkbox with selection
- checkbox on hover
From the design front, configure two image controls one with the "checkbox without selection" and other with "checkbox with selection" and toggle them using client side visible when condition. Each of these image control should also have 2 events,
- Hover - Set Style (this will display the checkbox on hover image)
- Click - Set value for the actual check box property. (For checkbox without selection image - set true value and for checkbox with selection - set value false)
Thanks,
Sathish
CGI
IN
Thanks Sathish,
I tried various options trying customization in Action tab of Checkbox cell properties. It displays border for label only on Hover.
We have following controls in OOTB
Please guide me, which control to save as and customize as you mentioned.
It will great help, if you can share the code which you mentioned above.
Thanks in Advance!
Best Regards
U Rajasekhar
CGI
IN
Hi Sathish,
Please guide me, which control to save as and customize as you mentioned.
It will great help, if you can share the code which you mentioned above.
Thanks & Regards
U Rajasekhar
Updated: 19 Apr 2016 3:31 EDT
Actually there is no need to write any custom code to achieve this. You just need to implement what I have suggested earlier using OOTB Pega features.
On Second thought, i think it would be more appropriate for you to raise an SR request. So that the GCS will actually suggest if there is any other alternate work around for this scenario.
Thanks,
Sathish
CGI
IN
Thanks Sathish,
You can use to implement what you suggested at https://paex19-ap.pegacloud.com/prweb/PRServlet
Admin@SAE/rules
I am using it for learning Pega 7,
Thanks & Regards
U Rajasekhar
That's the very reason I asked you to come via GCS. So that they can guide you with any other approaches for your custom requirement (or) they can unblock you with the problem you are facing implementing the approach that I suggested.
Does that sounds fair to you ?
CGI
IN
Hi Sathish,
As suggested, we are raising SR for this customer request i.e. comes under Accessibility and Usability of application.
But I am sure GCS team will say, it is not a bug and it is customer specific requirement. It may be consider as future enhance.
In Parallel, we are trying to get solution from Mesh community.
Below steps followed to implement as you suggested
1 Created a checkbox property to store value.
2 Created 3 binary files checkbox without selection, checkbox with selection, checkbox on hover.
3 Created a section with 2 layouts. One for checkbox without selection ICON control and another checkbox with selection ICON control.
4 Added visible conditions based on Property created in first step.
- Checkbox property false display first layout i.e. checkbox without selection ICON control .
- Checkbox property true display second layout i.e. checkbox with selection ICON control
4 Add 2 events for each ICON control layouts
- Hover - Set Style (this will display the checkbox on hover image) - Query
- Click - Set value for the actual check box property. (For checkbox without selection image - set true value and for checkbox with selection - set value false)
Query:
Hi Sathish,
As suggested, we are raising SR for this customer request i.e. comes under Accessibility and Usability of application.
But I am sure GCS team will say, it is not a bug and it is customer specific requirement. It may be consider as future enhance.
In Parallel, we are trying to get solution from Mesh community.
Below steps followed to implement as you suggested
1 Created a checkbox property to store value.
2 Created 3 binary files checkbox without selection, checkbox with selection, checkbox on hover.
3 Created a section with 2 layouts. One for checkbox without selection ICON control and another checkbox with selection ICON control.
4 Added visible conditions based on Property created in first step.
- Checkbox property false display first layout i.e. checkbox without selection ICON control .
- Checkbox property true display second layout i.e. checkbox with selection ICON control
4 Add 2 events for each ICON control layouts
- Hover - Set Style (this will display the checkbox on hover image) - Query
- Click - Set value for the actual check box property. (For checkbox without selection image - set true value and for checkbox with selection - set value false)
Query:
- 1. Can you please guide me how to display image using Set Style?
- 2. Please review above steps and let me know if any changes required.
Thanks & Regards
U Rajasekhar
Hi Rajasekhar,
Good. you are almost there.
Here is the snap shot you requested,
Actions configured on checkbox without selection:
Actions configured on checkbox with selection:
Now you just need to write some styles for following classes MyCheck, MyCheck_Checked, MyCheck-Hover. Here you can use background:url property to govern the images.
CGI
IN
Hi Sathish,
When clicking on Unchecked checkbox image, Layout is not changing to checked checkbox.. Please find the screen shot
Section screen
Layout 1 condition
Layout 2 condition
Unchecked Image cell properties
Hi Sathish,
When clicking on Unchecked checkbox image, Layout is not changing to checked checkbox.. Please find the screen shot
Section screen
Layout 1 condition
Layout 2 condition
Unchecked Image cell properties
Please guide me.
Thanks & Regards
U Rajasekhar
Pegasystems Inc.
IN
Hi Rajasekhar,
In Layout2 configuration, please check option for "Run Visibility Condition on Client" and check it is works or not.
Shibani,
Actually there is no need for section refresh since this is a client side visible expression.
Rajasekhar,
Do you have a hidden text control with the checkbox property ? Without this set value action will not work and client side visible whens will not fire.
CGI
IN
Thanks Sathish,
After adding checkbox property to section, now click event is working.
As mentioned above, I have implemented HOVER event. It is not working. Please guide me.
Please find the details below
1 Created a cascading style sheet (CSS) file, for example, CheckBoxCss.css.
2 In the CSS file content:
/* define the style class MyCheck*/
.MyCheck{
background-image: url("CheckBoxWithoutSelect.gif");
background-repeat: no-repeat;
}
/* define the style class MyCheck*/
.MyCheck_Checked{
background-image: url("CheckBoxWithSelect.gif");
background-repeat: no-repeat;
}
/* define the style class MyCheck_Hover*/
.MyCheck_Hover{
background-image: url("CheckBoxWithHover.gif");
background-repeat: no-repeat;
}
3 Save the UserWorkForm HTML fragment in an open ruleset and reference the CSS that you created in steps 1 and 2:
<link rel="stylesheet" type="text/css" href="css/CheckBoxCss.css">
Thanks & Regards
U Rajasekhar
These are the styles which I have used,
<style>
.MyCheck {
width: 19px;
height: 19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -37px top no-repeat;
cursor:pointer;
}
.MyCheck_Checked {
width: 19px;
height: 19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -56px top no-repeat;
cursor:pointer;
}
.MyCheck-Hover {
width: 19px;
height: 19px;
margin:-1px 4px 0 0;
vertical-align:middle;
cursor:pointer;
background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -20px top no-repeat;
}
</style>
This is how I am assigning the class for icon,
CGI
IN
Hi Sathish,
I have created 3 binary files and calling from Checkbox cell properties
Query: Could you please let me know
1 Do you created css file? If no, where you saved your style.
2 How you are access your css file? I am included in userworkform HTML fragment rule.
3 Should I use background:url("webwb/CheckBoxWithHover.gif") inplace of background-image: url("webwb/CheckBoxWithHover.gif").
Please guide us.
Thanks & Regards
U Rajasekhar
1 Do you created css file? If no, where you saved your style.
It doesn't matter but i have included my CSS file as part of harness styles.
2 How you are access your css file? I am included in userworkform HTML fragment rule.
same as above
3 Should I use background:url("webwb/CheckBoxWithHover.gif") inplace of background-image: url("webwb/CheckBoxWithHover.gif").
Mine is just a shorthand notation. Please find the example for configuring background style for body element,
body {
background: #00ff00 url("smiley.gif") no-repeat; // short hand
}
This is same as below,
body {
background-image: url("smiley.gif");
background-color: #00ff00;
background-repeat: no-repeat;
}
CGI
IN
Thanks Sathish,
I don't know, when I include CSS file as apart of UserWorkForm HTML fragment, Hover event is not working.
<link rel="stylesheet" type="text/css" href="css/CheckBoxCss.css">
Anything wrong with above syntax?
Thanks & Regards
U Rajasekhar
Please verify the App Name (Directory) of the text file.
I have created my CSS Text file under webwb directory and below is the syntax for the same,
<link rel="stylesheet" type="text/css" href="webwb/Test.css">
CGI
IN
Hi Sathish,
Thanks for resolving, i.e. CSS file from Userworkform HTML fragment.
I tried with Style class. Same Inline style issue is happening
.MyCheck_Hand{
border-width: thick;
border-style: solid;
border-color: blue;
}
Thanks & Regards
U Rajasekhar
Can you try the below style,
input.MyCheck_Hand + label{
border: 2px solid green;
}
label.MyCheck_Hand{
border: 2px solid green;
}
With this only the label element gets the border as and when we hover over check box / label.
CGI
IN
Hi Sathish,
Yes, it is only the label element gets the border as and when we hover over check box / label.
But requirement is to have combine highlight border for check box and label, when we hover over check box / label.
Thanks & Regards
U Rajasekhar
I am not sure what is the correct expectation when we hover over the label. Whether it should highlight the check box as a whole or only the label.
As per current implementation, when label is hovered, we add class style only for the label, so only label gets the border. But when check box is hovered, the style is added to checkbox's parent element hence both check box and label gets a border.
CGI
IN
Hi Sathish,
1 Can we achieve, when check box/ Label is hovered, both check box and label gets a border. If this is not possible,
2 Can we achieve, when check box/ Label is hovered, Only check box gets a border.
If above points are possible, Can show to client.
Thanks & Regards
U Rajasekhar