Skip to main content
Participant
June 22, 2024
Question

Does the API allow to move fields?

  • June 22, 2024
  • 4 replies
  • 476 views

So I'm making an invoice template. It basically allows you to add as many fields as you want, along with notes for those fields and delete any fields. The issue is that as written you can only delete the most recent field. Otherwise, there's a big whole where the field used to be. I want to figure out a way to move all the fields after the deleted field up the appropriate amount. I know how the logic needs to look but I can't get it to work. Does the API allow you to move fields already on the document? Here's my code as of now 

 

```

var lineItemCount = 1;
var yTracker = 542;
var lineItemNoteMap = {};
var currentLineItem = 0;

 

function addLineItem() {
lineItemCount++;

// Define field names
var lineName = "lineItem " + lineItemCount;
var slugName = "lineItemSlug " + lineItemCount;
var rateName = "rate " + lineItemCount;
var hoursName = "hours " + lineItemCount;
var totalName = "total " + lineItemCount;

// Define y values
var line_uly = yTracker - 13;
var line_lry = line_uly - 21;

// Add Line Item field
this.addField(lineName, "text", 0, [228, line_uly, 365, line_lry]);
var lineItemProps = this.getField(lineName);
lineItemProps.textSize = 14;

// Add Line Item Slug field
var lineItemSlug = this.addField(slugName, "button", 0, [206.5, line_uly-4, 219.5, line_lry+4]);
lineItemSlug.buttonSetCaption (lineItemCount);
lineItemSlug.setAction ("MouseUp" , "deleteLineItem(" + lineItemCount + ")");
lineItemSlug.textColor = color.white;
lineItemSlug.textSize = 10;
var slug = this.addAnnot({
type: "Circle",
page: 0,
rect: [206.5, line_uly-4, 219.5, line_lry+4],
fillColor: ["CMYK" , .85, .72, .53, .59],
strokeColor: ["T"]
});

// Add rate field
this.addField(rateName, "text", 0, [419.615, line_uly, 474.815, line_lry]);
var rateFieldProps = this.getField(rateName);
rateFieldProps.textSize = 14;

// Add hours field
this.addField(hoursName, "text", 0, [494.615, line_uly, 549.815, line_lry]);
var hoursFieldProps = this.getField(hoursName);
hoursFieldProps.textSize = 14;

// Add total field
this.addField(totalName, "text", 0, [563.523, line_uly, 618.723, line_lry]);
var totalFieldProps = this.getField(totalName);
totalFieldProps.textSize = 14;

// update yTracker
yTracker = line_lry;
currentLineItem = lineItemCount;
}

var noteCount = 0;
function addNote() {
noteCount++;
var noteName = "Note " + noteCount;
var slugName = "Note Slug " + lineItemCount;
var note_ulx = 249;
var note_uly = yTracker - 5;
var note_lrx = 386;
var note_lry = note_uly - 10;
var slug_uly = note_uly - 3.5;
var slug_lry = note_lry + 3.5;
var base = Math.abs(slug_uly - slug_lry); // length of the base
var height = base / Math.sqrt(3); // height of the triangle
var slug_apex = [240.179 + height, (slug_lry + slug_uly) / 2]
var pointVertices = [[240.179,slug_lry],[240.179,slug_uly], slug_apex];
var noteText = this.addField(noteName, "text", 0, [note_ulx, note_uly, note_lrx, note_lry]);
noteText.textSize = 10;
var slug = this.addAnnot({
type: "Square",
page: 0,
rect: [228.179, slug_uly, 240.179, slug_lry],
fillColor: ["CMYK" , .85, .72, .53, .59],
strokeColor: ["T"],
width: [0
]
});
var slugPoint = this.addAnnot({
type: "Polygon",
page: 0,
vertices: pointVertices,
fillColor: ["CMYK" , .85, .72, .53, .59],
strokeColor: ["T"],
});
organizeNote(noteName);
yTracker = note_lry;
}

function deleteLineItem(index) {
// Names of the items to delete
var lineName = "lineItem " + index;
var slugName = "lineSlug " + index;
var rateName = "rate " + index;
var hoursName = "hours " + index; // Assuming similar naming for rate, hours and total fields
var totalName = "total " + index;

// Remove the items
this.removeField(lineName);
this.removeField(slugName);
this.removeField(rateName);
this.removeField(hoursName);
this.removeField(totalName);

// Getting number of notes associated with this line item
var notesCount = lineItemNoteMap[index] ? lineItemNoteMap[index].length : 0;

// Deleting the associated notes for this line item within lineItemNoteMap
if (notesCount > 0) {
lineItemNoteMap[index].forEach(noteName => {
this.removeField(noteName); // Remove the note fields
});

delete lineItemNoteMap[index]; // Remove the item from the map
}
// Calculate the required Y movement
// Replace "lineItemHeight" and "noteHeight" with actual heights, and "lineItemPadding" and "notePadding" with actual paddings
var offset = 34 + (notesCount *10) + (notesCount * 5);

// Adjust currentLineItem if necessary
currentLineItem = (currentLineItem === index) ? 0 : currentLineItem;
yTracker = yTracker + offset;
lineItemCount--;
}

function organizeNote(noteName) {
// currentLineItem holds the line item that notes should currently be associated with.
// lineItemNoteMap is the object holding arrays of notes for each line item.

if (lineItemNoteMap[currentLineItem]) {
// If current line item already has notes, just add the new note to its array
lineItemNoteMap[currentLineItem].push(noteName);
} else {
// If this is the first note for the current line item, start a new array
lineItemNoteMap[currentLineItem] = [noteName];
}
}

```

This topic has been closed for replies.

4 replies

Bernd Alheit
Community Expert
Community Expert
July 24, 2024

Have you tested the script?

leo.r
Community Expert
Community Expert
July 30, 2024
quote

Have you tested the script?

By @Bernd Alheit

 

That "user" is an AI spam bot.

Participating Frequently
June 26, 2024

If you're looking for a WYSIWYG solution for building a Form including moving fields, adding fields/checkboxes/etc - have a look at - https://pspdfkit.com/pdf-sdk/web/form-creator/

try67
Community Expert
Community Expert
June 22, 2024

Yes. To move a field you just need to apply a new value to its rect property with the new location. Note this only works on the same page the field was created on. You can't move it to another page, as the page property is read-only.

bebarth
Community Expert
Community Expert
June 22, 2024

Hi,
Instead of deleting the fields at the middle of your table, you can just change the values from the indice you want until the end and remove the last line...

For example, if you have 20 lines and want the delete the 15th one, all values of the 15th line will get the value onf the 16th one, all values of the 16th line will get the value onf the 17th one, ... all values of the 19th line will get the value onf the 20th one, and you remove the fields of the 20th line!

Let me know if it's not very understandable...

@+