Hi,
I'd like to use some small images that I've designed, as buttons on a form, working the same as radio buttons. Clicking an image will set a choice field to a particular value.
Is it possible to put an image on a button, instead of text? I'm aware of the image click function, but wondered if this would be an easier solution.
EDIT: Is it possible to use the Office UI Fabric icons in buttons?
Is there a simple/quick way to 'grey out' the other images/buttons in the set? Just to indicate which is the current choice. I don't want to hide them, as the choice could change during the process.
Many thanks
Nick
Hello @Nick.Jones,
Do you want to replace radio buttons with images/icons? Or do you need to replace button text with image/icon?
Hi @mnikitina ,
I'm looking for a way to make buttons more graphic; my preference would be to use the small images I've designed as the 'text' on a button.
Here's an example of one of the images, to set one of the choice fields to 'Library':
I'd like to find the easiest way to do this. There will be two sets of buttons, each of which will set the value of a choice field, so they will work in a similar way to radio buttons.
The options I can think of are:
To make each image clickable.
To add the images to buttons instead of text.
To add Fabric icons to a button as well as text.
Then some code/functionality that will make it clear which is the currently chosen one.
I'm hoping to find out if there are any other ways to do this, which options are possible, and of the possible options, which is easiest to implement.
Sorry if my initial post was a bit unclear, I wasn't sure how to explain it.
regards
Nick
Hello @Nick.Jones,
Thank you for clarification!
I think the easiest will be adding multiple image controls to the form. Add unique class to each image, e.g. 'option1', 'option2', 'option3', etc.
And add corresponding code to the image Click property:
//change choice field value
fd.field('Choice').value = 'Option 1';
//make icon look active
document.getElementsByClassName('option1')[0].style.filter = 'grayscale(0)';
//grey out other icons
document.getElementsByClassName('option2')[0].style.filter = 'grayscale(1)';
document.getElementsByClassName('option3')[0].style.filter = 'grayscale(1)';
Hi @mnikitina ,
Thanks - that works, but behaves a bit strangely. I tested it on a group of 3 images. The only changes I made to the code were the field name and option value.
When I click on one of them, it changes the choice field and briefly shows the other images in greyscale, but then the form refreshes and the images return to full colour. It gives an error in the console, but the form refreshes too quickly to read it.
EDIT: I think it's "uncaught 'Type Error': Cannot read property 'SPRedirectedurl' of null". None of the images have a URL set.
The other oddity is that the images with code in the click property are shown slightly cropped compared to the others. Only the first three images below have code. They are all set to 75x75, and in a grid cell of width 1.
Many thanks
Nick
Hello @Nick.Jones,
Do you have any code that runs when the choice field value is changed? Try to comment out all other custom code and test the buttons.
Add all images into one grid container and set image cell width to 1 for all of them.
1 Like
Hi @mnikitina,
No, there's no other code on the form yet, I set it up to test how to use the images as buttons.
Screenshots below:
-
The form designer, all 11 images in one grid, all set to 80 width, in width 1 cells. Images 4, 5 and 6 from the left have code on them, all the same as the code shown (except field value and which are greyed out).
-
The images when the form is used (4,5,6 are all slightly cropped). Clicking one of them changes the RequestType field value, and the other two are momentarily greyed out, then the uncaught type error comes up in console, the form refreshes and all images are back in full colour.
The images are all in the Site Assets>Site Pages>RequestForm folder, and I've used the version>right-click>copy link method to get the Image URL.
I've just added some alerts to the code for the Site button, and managed to catch the error:
sp-pages-assembly_en-us_4fc031d325b4af9599b7387c456c2e42.js:1
Uncaught TypeError: Cannot read property 'spRedirectedUrl' of null
at Object.onAnchorFragmentIntercept (sp-pages-assembly_en-us_4fc031d325b4af9599b7387c456c2e42.js:1)
at t._interceptAnchorClick (sp-pages-assembly_en-us_4fc031d325b4af9599b7387c456c2e42.js:65)
at t._interceptClick (sp-pages-assembly_en-us_4fc031d325b4af9599b7387c456c2e42.js:65)
This is the amended code:
alert("start1");
//change choice field value
fd.field('RequestType').value = 'Site';
alert("start2");
//make icon look active
document.getElementsByClassName('option1')[0].style.filter = 'grayscale(0)';
alert("start3");
//grey out other icons
document.getElementsByClassName('option2')[0].style.filter = 'grayscale(1)';
alert("start4");
document.getElementsByClassName('option3')[0].style.filter = 'grayscale(1)';
alert("start5");
The error shows as soon as I click the Site button, before even the first alert is displayed.
I wouldn't be surprised if it's something I haven't set up correctly 
Regards
Nick
Hello @Nick.Jones,
I'm sorry, my bad! I forgot the important thing, add event.preventDefault(); to the code, like this:
event.preventDefault();
//change choice field value
fd.field('Choice').value = 'Option 1';
//make icon look active
document.getElementsByClassName('option1')[0].style.filter = 'grayscale(0)';
//grey out other icons
document.getElementsByClassName('option2')[0].style.filter = 'grayscale(1)';
document.getElementsByClassName('option3')[0].style.filter = 'grayscale(1)';
And try out adding this CSS to prevent images squeeze and overlay:
.fd-form .fd-image-wrapper {
overflow: visible !Important;
}
1 Like
Hi @mnikitina
No apology necessary, thank you for that, it's worked perfectly.
No cropping, and greying/highlight is excellent.
Thank you
Regards
Nick
1 Like