Technical Guide: Progressive Data Capture

This is a technical addendum to Introducing: Progressive Data Capture. Some customers may want greater control over the display of fields in their progressive data capture experience. When a user has not provided any prior answers, there is a risk that they will be presented with an unmanageable number of progressive fields (questions) when they first arrive at an experience. It seems sensible to set a limit on the number of progressive fields presented simultaneously and then spread them over subsequent visits. 

Details

All progressive fields will be identifiable by a set of CSS classNames that you can inspect with JavaScript and further control which fields are shown.

.xProgressive - Indicates a field that supports progressive data capture

.xProgressiveAnswered - Indicates a progressive data capture field that has already been answered and will be hidden by default.

You can get a list of all progressive fields and compare the items with the list of already answered progressive fields to derive any logic from.

Example

Below is an example illustrating how you could use the classNames to show a maximum of 2 progressive data capture fields to a user per visit; but you could apply the same principles to any other custom behavior you wish to achieve.

<script>
  const MAX_NUM_VISIBLE_PROGRESSIVE_FIELDS = 2;
  
  // Wait until your experience broadcasts the "page:ready" event
  //   so you can be assured the progressive fields have rendered
  NGX.on('page:ready', () => {
    const unansweredProgressiveFields = $('.xProgressive:not(.xProgressiveAnswered)');
    const numFieldsToHide = unansweredProgressiveFields.length - MAX_NUM_VISIBLE_PROGRESSIVE_FIELDS;

    let i = 0;
    while (i < numFieldsToHide) {
      // Apply the "xHidden" className which is a convention in Wayin Experiences
      unansweredProgressiveFields.eq(i).addClass('xHidden');
      i++;
    }
  });
</script>