1
0
-1

I have a form with a bunch of pass/fail radio buttons. I'd like to show a list of fail results that the user can click on to focus on that field.

Is there an easy way to do this?

I'd actually just put validation on all the fields so the link to all the fails would show up in the form error messages when you click a Validate button. But now I realise that I'd like to make it a collaboration form (initially I was going to just share it) and this won't allow me to submit the original step.

    CommentAdd your comment...

    4 answers

    1.  
      2
      1
      0

      Hi Lin, after reviewing this again with Bill it seems like the ideal approach would be to not use the validation system (because of other side effects, as you've pointed out, such as not being able to submit the form) but to provide a better way of navigating to items across pages within a form. I completely understand why you used the validation system to achieve this currently, as it provides that functionality with Form.gotoError - indeed it's a pretty creative way to approach it.

      I believe you have identified a "missing piece" in our Maestro API for a method like Form.gotoField(itemOrId) which would do what you want. You could then use a regular repeat on your summary page to display the "fail" data items, with a click handler that calls this method.

      We will work on this today and report back here as soon as possible with an interim way of achieving this approach prior to such a method being added to the standard API.

      1. Lin VanOevelen

        Thanks Tim and Bill.

        It's not overly urgent. I'm actually creating a form we can use to test forms, so it's just for internal use.

        But no fussier customers than form designers!

        From our clients, we do sometimes get the "Can we get the customer to preview their data before they submit" question, which clickable text could also be useful for, but we usually try to talk them out of this idea at the moment.

      2. Tim Stewart

        Hi Lin, we have prototyped a Form.gotoField function within a sample form. I'll send an export of the form directly through to you and if it meets your needs then we will add this function to the standard Maestro API. 

      3. Tim Stewart

        Hi Lin, attached above is a sample form that you can import into Maestro showing a prototype of a Form.gotoField function that could be used in your scenario.

        If you enter a few "tests" on page 2, including a few "failed" ones, then go to the Summary page you will see a list of "failed" tests. You can click the button next to any failed test to navigate back to it. It's not that pretty but let us know if it meets your needs functionally, or if you have any further questions. If it looks good we'll move it into our standard API, and you will receive this in the next release.

      4. Lin VanOevelen

        Hi Tim. Sorry about the delay,

        But I finally had time to look at it and it looks fantastic! I still have some deadlines to deal with, but will attempt to implement this in my form asap and let you know how I go.

      CommentAdd your comment...
    2.  
      1
      0
      -1

      Hi Lin,

      I can show you a method to create the list of errors you want, so you can click on them to take you to the errored fields.  It's a multi-step approach that takes advantage of the fact that a TextDisplay can contain any type of HTML, even HTML that includes Angular directives.  It also uses a minimal amount of JQuery, which is not normally a sanctioned option, but you can decide if you want to use the method or not.

      These are the steps:

      1. Build a list of errors.  I did this by putting this code in the click rule of a button:

        Form.validate("content", data).then(function(status) {
          data.$errors = status.errors;
        });

      2. Populate the list of errors.  I added a TextDisplay on the last page of a form and edited its contents in 'Source' mode:
        <div ng-repeat="e in data.$errors"><a data-scrollto="{{e.id}}" class="clicker">{{e.msg}}</a></div>

      3. Add a visibility rule to the TextDisplay holding the errors:
        return data.$errors && data.$errors.length > 0;

      4. Add delegated click handlers to all the anchor elements in a Form Load rule.  This code will add the click handler when new elements are created anywhere in the form, even in the future:

        $(document).on('click', '.clicker', function (event) {
          var targetField = event.currentTarget.attributes['data-scrollto'].nodeValue;
          Form.gotoError(Form.getItemFromPath(targetField));
        });

      If you're not sure how to use 'Source' mode to edit a TextDisplay, this is how you get there:


        CommentAdd your comment...
      1.  
        1
        0
        -1

        I think I understand what you are trying to achieve. 

        Make the Validation rules dependent on a data value you use as a flag.  That flag could be a checkbox on the last page that the user clicks to confirm they want to send it on for collaboration.  If needed Pre-fill service could set the flag for each initial viewing in the collaboration.  Collaboration Job should check if allowed to finish, ie flag off  when submitted.

          CommentAdd your comment...
        1.  
          1
          0
          -1

          Hi Lin,

          Once you decide which field you want to focus to, you can call Scroll.scrollTo(field, true, percent) to scroll to it and give it focus. The second parameter tells it to give focus, and the third is a percentage of how far from the top to show the field.

          1. Lin VanOevelen

            I think my question was more related to searching and displaying the search result as links.

            I would rather avoid having to reference each field and having to add a click event for each one if possible.

          2. Lin VanOevelen

            I'm not explaining myself very well.

            This is the example scenario:

            • I have 20 pass/fail radio buttons
            • on the last page I want to have a way to list all fields that return a fail value with the ability to click on each one to go to that field
            • i would like to achieve this without having to reference each field separately so it would need a search function of some sort.
            • i also want to be able to submit the form with fails in it as I want to send it to a collab job.

            Or alternatively, I could continue using validation if I can figure out how to ignore validation errors on submit.

          CommentAdd your comment...