You are viewing limited content. For full access, please sign in.

Question

Question

Change checkbox appearance

asked on June 2, 2020

For background, we have a really cool eval form with a custom color scheme to go with each potential value.  We recently upgraded our Forms server to the newest version.  One of the apparent changes that came along with this is that Forms now changes how checkboxes are displayed.  Rather than a black check mark on a white background, when filling out the form it now puts a white checkbox on a blue background, like so:

That’s fine, it’s still obvious enough.  However, when viewing it in a read-only state, the checkboxes are far less obvious.  Here’s the way it used to display:

And here’s the way it displays in read-only now:

The checkmark is still there but it’s FAR harder to see (though slightly more obvious on one of the other colors aside from grey).  The color of the checkbox now matches the color of the div it rests in when in read-only mode.  When we strip out the color for long-term storage (color takes WAAAAY more space than black and white) these checkboxes don't survive the conversion.

 

I've tried using CSS to change the appearance of these input areas, but when the field is in read-only mode (as most of the form is for the final review step) even using the "!important" tag doesn't work.  Does anyone have ideas on how to get around this?

0 0

Answer

SELECTED ANSWER
replied on June 9, 2020

If anyone in the future is interested, my solution was to make the colors more faint (used W3 School's html color picker to get what I wanted) like so:

/*Modifications for evaluation tables (Unsatisfactory - Far Exceeds)*/
.cf-table th {display:none;}
.EvalTableEmp span.choice {text-align:center;}
.EvalTableEmp span .form-option-label {color:black}
.EvalTableMan span.choice {text-align:center;}
.EvalTableMan span .form-option-label {color:black}
.FarExceeds {border-radius: 5px; background-color:#cce0ff;}
.ExceedsReq {border-radius: 5px; background-color:#d6f5d6;}
.MeetsReq {border-radius: 5px; background-color:#f2f2f2;}
.NeedsImprovement {border-radius: 5px; background-color:#ffe0cc;}
.Unsatisfying {border-radius: 5px; background-color:#ffcccc;}

Then I run the resulting entry through this black-and-white conversion script:

namespace WorkflowActivity.Scripting.RemoveColor
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Data.SqlClient;
    using System.Text;
    using System.IO;
    using System.Windows.Media.Imaging;
    using System.Linq;
    using Laserfiche.RepositoryAccess;
    using Laserfiche.Imaging;
    using Laserfiche.DocumentServices;

    /// <summary>
    /// Provides one or more methods that can be run when the workflow scripting activity is performed.
    /// </summary>
    public class Script1 : RAScriptClass104
    {
        // this value seems to match the results we get from the Quick Fields Remove Color process.
        //const int BITONAL_THRESHOLD = 130;
        const int BITONAL_THRESHOLD = 170;
        /// <summary>
        /// This method is run when the activity is performed.
        /// </summary>
        protected override void Execute()
        {
            if(BoundEntryInfo.EntryType != EntryType.Document)
            {
                WorkflowApi.TrackError("The specified entry is not a document");
                WorkflowApi.TerminateWorkflow("The specified entry is not a document");
            };

            DocumentInfo doc = (DocumentInfo)BoundEntryInfo;

            if(doc.PageCount == 0)
            {
                WorkflowApi.TrackError("The specified document has no pages");
                WorkflowApi.TerminateWorkflow("The specified document has no pages");
            }

            if(doc.GetPageInfos().All(d => d.ImageDepth == 1))
            {
                WorkflowApi.TrackWarning("The specified document is already black and white");
                WorkflowApi.CompleteWorkflow("The specified document is already black and white");
            }

            DocumentExporter exporter = new DocumentExporter();
            exporter.PageFormat = DocumentPageFormat.Tiff;
            MemoryStream stream = new MemoryStream();
            PageSet pages = new PageSet(new PageRange(1, doc.PageCount));
            exporter.ExportPages(doc, pages, stream);

			LfiBitmapDecoder decoder = new LfiBitmapDecoder(stream, BitmapCreateOptions.None);
			LfiBitmapEncoder encoder = new LfiBitmapEncoder(LfiContainerFormat.Tiff);

			// We need to do some gyrations because SSRS outputs multi-page TIFFs that also have RGB sub-pixel rendering.
			foreach (LfiBitmapFrame frame in decoder.Frames.ToList())
			{
				LfiBitmapSource source = new LfiWriteableBitmap(frame.DecodeBitmap());
				LfiGrayscaleThresholdBitmap bw = new LfiGrayscaleThresholdBitmap(source, BITONAL_THRESHOLD);
				LfiBitmapFrame newFrame = new LfiBitmapFrame(bw, LfiBitmapCodec.FaxGroup4);
				encoder.Frames.Add(newFrame);
			}

			MemoryStream ms = new MemoryStream();
			encoder.Save(ms);

            doc.DeletePages(pages, PageDeletionOptions.ForcePurge);

            DocumentImporter importer = new DocumentImporter();
            importer.Document = doc;
            importer.ImportImages(ms);

			ms.Dispose();

			doc.Save();
			doc.Unlock();
			doc.Dispose();
        }
    }
}

 

0 0

Replies

replied on June 8, 2020

One think I can think of is what if you change the CSS on the label to be a normal font weight and only bold it and perhaps increase the font-size if that particular item is selected? Might draw a little more attention.  I might have some CSS examples if interested 

1 0
replied on June 9, 2020

Thanks Drew!  That's a good idea, I might do that in addition to what I ended up with.  Ultimately, I lightened my colors and altered the script that converts to black and white so that the checkmarks do come through (even though I'm not super pleased with the faint visibility).

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.