Question

Adding elements to collections? Is it even possible in version 12 without jQuery?

Version 12 Forms Forms Layout Designer Web Client

Updated December 15

asked on December 12

Okay - I'm working on a travel form. I'm using items in a collection to represent individual days.

For each day - the user can specify - is this day 'Local Travel' or 'Overnight' to indicate being part of an overnight trip. When the user does pick Overnight - I want to automatically create a new item in the collection, and to increment the one of my date fields in the collection for the new row, referencing row()-1.

With jQuery this is a piece of cake. With LFForms either my understanding of the library is wrong, or it's just not listening to the DOM. I'm losing it.

Here's my code:

// The corrected version of your initial attempt
LFForm.onFieldChange(function(event) {
  
  // The event object provides the specific value that changed
  if (event.value === "Overnight") {
    // Add set to the collection named 'Travel_Date_3'
    LFForm.addSet({variableName: "Travel_Date_3"}, 1);
  }

// Associate the listener ONLY with the field being changed: 'Travel_Type'
}, {variableName: "Travel_Date_3.Travel_Type"});

I've tried with the variable name both WITH and WITHOUT the collection name as prefix. It's not working. And I wish I could enable the console while in test/preview mode just so I could actually debug. It'd be nice to know what the options are here.

Thanks!

1 0

Replies

replied on December 15

I threw together a simple collection to give it a shot.

LFForm.onFieldChange(async (e) => {
  //Print to show the exact event object structure
	console.log(e);

  //Details on the field that triggered the event are found in e.options[0]
  const eventRow = e.options[0].index;
  const eventField = e.options[0].fieldId;

  //The actual value of the field we're watching - I assumed a checkbox here
  const fieldValue = await LFForm.getFieldValues({ fieldId: eventField, index: eventRow }).value;
  console.log(fieldValue);

  if (fieldValue === "Overnight") {
    await LFForm.addSet({ fieldId: 1 });
    const currentDate = await LFForm.getFieldValues({ fieldId: 4, index: eventRow });

    //I'm sure theres a better way to manipulate dates but this works at least
    const currentDateObj = new Date(currentDate.dateTimeObj);
    const nextDay = new Date(currentDateObj);
    nextDay.setDate(currentDateObj.getDate() + 1);
    
    const year = nextDay.getFullYear();
    const month = String(nextDay.getMonth() + 1).padStart(2, '0');
    const day = String(nextDay.getDate()).padStart(2, '0');
    
    const newDate = {
      dateStr: `${year}-${month}-${day}`,
      timeStr: currentDate.timeStr,
      dateTimeObj: nextDay.toISOString()
    };
    
    console.log(newDate);

    await LFForm.setFieldValues({ fieldId: 3, index: eventRow + 1 }, newDate);
  }

}, { fieldId: 2 });

I tied to keep the code spaced and commented so it's clear as to what is happening and can be applied where you need it. I'm sure there's a cleaner way to manipulate LF date objects, maybe someone else will chime in with something cleaner there!

Also the Chrome developer console does work for me while in form previews, at least for console.log().

4 0

replied on December 15

Woah.. very clean code and use of the event object/promises!

If you want to manipulate an added row make sure to use async/await as shown in this example otherwise you'll have errors trying to set values on a non existent row.

0 0

replied on December 15

Nice! Using fieldId makes a lot more sense.

I got this working in a test case, at least for addSet(), but setFieldValues() is still misbehaving.

Dev console seems to be issue with my Chrome. Edge is working fine, but also it is telling me that JQMIGRATE is installed.

Thanks!

0 0

replied on December 15

You need to make sure you are using async/await

See line 1 defining the async function, and line 14 await adding the set to the collection

0 0

replied on December 15

Variable name doesn't work with fields in a collection the way you have it on line 11. I'd recommend just using fieldId so you don't have to worry about what works and what doesn't work.

const formFields = {
  travelDate3: { fieldId: 4 },
  travelType: { fieldId: 5 },
};

// The corrected version of your initial attempt
LFForm.onFieldChange(function(event) {
  
  // The event object provides the specific value that changed
  if (event.value === "Overnight") {
    // Add set to the collection named 'Travel_Date_3'
    LFForm.addSet(formFields.travelDate3, 1);
  }

// Associate the listener ONLY with the field being changed: 'Travel_Type'
}, formFields.travelType);

1 0

You are not allowed to follow up in this post.

Question

Question

Adding elements to collections? Is it even possible in version 12 without jQuery?

Replies

Sign in to reply to this post.