Using Nu specific functions in forms and objects Topic is solved

[tsignadze]

To upload a file, you can use the File object.
This Tutorial should help you get startet to parse an XML file: https://www.w3schools.com/xml/default.asp

Hey Kevin, I have been trying to figure out how to upload xml and display its data in fields, could you make a quick demo if that is not too much to ask? I have tried everything I could find.

[kev1n]

Do you have sample data of an xml file?

[tsignadze]

Yes, here it is :

QRR.xml

Code: Select all

<CommonTemplate Version="2.0">
<TerminalTemplate>
 <MasterTerminalID>TBCPOSQRPAY</MasterTerminalID>
 <TerminalId>320761243</TerminalId>
 <Address>Sample Address</Address>
 <SerialNo>320761243</SerialNo>
 <VirtualPOSID>SH039915</VirtualPOSID>
 <WKeyTPK>EDE4A04E2ED78E2532A5D18B934E6721</WKeyTPK>
 <SSLClientCertificate></SSLClientCertificate>
 <SSLPrivateKey></SSLPrivateKey>
 <ReconciliationTime>21:00:00</ReconciliationTime>
 <Caption>11111111-433651960</Caption>
</TerminalTemplate>
<PossessorTemplate>
 <Name>Sample Name</Name>
 <MerchantId>7913637_1</MerchantId>
 <FsINN>400342429</FsINN>
 <FsRsStatementNum>12087082</FsRsStatementNum>
 <FsSamID>27051465</FsSamID>
 <FsCashPayLimit>0</FsCashPayLimit>
</PossessorTemplate>
</CommonTemplate>

[kev1n]

Here's an example JavaScript code that allows the user to upload an XML file, extracts the TerminalId, Address, and FsRsStatementNum, and writes the values into HTML fields.

Add an HTML object to your form and place this code in the HTML field:

Code: Select all

<input type="file" id="file-input">
<br><br>
Terminal ID: <span id="terminal-id"></span><br>
Address: <span id="address"></span><br>
FsRsStatementNum: <span id="statement-num"></span>

<script>
// Get references to HTML elements
var fileInput = document.getElementById('file-input');
var terminalId = document.getElementById('terminal-id');
var address = document.getElementById('address');
var statementNum = document.getElementById('statement-num');

// Function to handle file upload
function handleFileUpload() {
  // Get the uploaded file
  const file = fileInput.files[0];

  // Create a new FileReader
  const reader = new FileReader();

  // When the FileReader finishes loading the file
  reader.onload = function(event) {
    // Get the contents of the file as a string
    const fileContents = event.target.result;

    // Create a new DOMParser
    const parser = new DOMParser();

    // Parse the file contents as XML
    const xmlDoc = parser.parseFromString(fileContents, "text/xml");

    // Get the TerminalId, Address, and FsRsStatementNum elements
    const terminalIdElement = xmlDoc.getElementsByTagName("TerminalId")[0];
    const addressElement = xmlDoc.getElementsByTagName("Address")[0];
    const statementNumElement = xmlDoc.getElementsByTagName("FsRsStatementNum")[0];

    // Set the values of the HTML elements
    terminalId.textContent = terminalIdElement.textContent;
    address.textContent = addressElement.textContent;
    statementNum.textContent = statementNumElement.textContent;
  };

  // Read the file as text
  reader.readAsText(file);
}

// Add an event listener to the file input
fileInput.addEventListener('change', handleFileUpload);
</script>

This code creates an event listener for the file input element that triggers when a file is selected. It then uses a FileReader to read the contents of the file, and a DOMParser to parse the contents as XML. It then extracts the values of the TerminalId, Address, and FsRsStatementNum elements and sets the text content of the corresponding HTML elements to those values.

You can customise it to extract various values and input them into designated fields etc.

2023-03-29_155356.png

[tsignadze]

Okay, I can display them in HTML but I want to create fields, something like this:

[kev1n]

Just assign the values of the xml to your text field. E.g. if the TerminalID has the object Id "terminalId":

Write:

Code: Select all

nuSetValue('terminalId', terminalIdElement.textContent);

Instead of:

Code: Select all

terminalId.textContent = terminalIdElement.textContent;

[tsignadze]

I have one more request Kevin,

What is wrong with my code? Only first one is getting filled when I upload XML (structure is same)
Edit: if I comment out nuSetValue('SerialNumber', terminalIdElement.textContent); this line, it works fine...

Code: Select all

<input type="file" id="file-input">
<br><br>
<script>
// Get references to HTML elements
var fileInput = document.getElementById('file-input');

// Function to handle file upload
function handleFileUpload() {
  // Get the uploaded file
  const file = fileInput.files[0];

  // Create a new FileReader
  const reader = new FileReader();

  // When the FileReader finishes loading the file
  reader.onload = function(event) {
    // Get the contents of the file as a string
    const fileContents = event.target.result;

    // Create a new DOMParser
    const parser = new DOMParser();

    // Parse the file contents as XML
    const xmlDoc = parser.parseFromString(fileContents, "text/xml");

    // Get the TerminalId, Address, and FsRsStatementNum elements
    const terminalIdElement = xmlDoc.getElementsByTagName("TerminalId")[0];
    const posIdElement = xmlDoc.getElementsByTagName("VirtualPOSID")[0];
    const addressIdElement = xmlDoc.getElementsByTagName("Address")[0];
    const reconcilationIdElement = xmlDoc.getElementsByTagName("ReconciliationTime")[0];
    const nameIdElement = xmlDoc.getElementsByTagName("Name")[0];
    const merchantIdElement = xmlDoc.getElementsByTagName("MerchantId")[0];
    const INNIdElement = xmlDoc.getElementsByTagName("FsINN")[0];
    const AppNumberIdElement = xmlDoc.getElementsByTagName("FsRsStatementNum")[0];
  
    

    nuSetValue('SerialNumber', terminalIdElement.textContent);
    nuSetValue('TerminalID', posIdElement.textContent);
    nuSetValue('Address', addressIdElement.textContent);
    nuSetValue('Reconcilation', reconcilationIdElement.textContent);
    nuSetValue('MerchantName', nameIdElement.textContent);
    nuSetValue('MerchantID', merchantIdElement.textContent);
    nuSetValue('INN', INNIdElement.textContent);
    nuSetValue('InstallAppNumber', AppNumberIdElement.textContent);
  };

  // Read the file as text
  reader.readAsText(file);
}

// Add an event listener to the file input
fileInput.addEventListener('change', handleFileUpload);
</script>

[kev1n]

Any errors in the developer console?
Is TerminalID written correctly?

Press CTRL+SHIFT+G to view the objects:

2023-03-29_181600.png

[tsignadze]

I figured it out, I had another script on TerminalID afterupdate event and it was the issue.

Now I have one more request..
I have a barcode scanner, which scans serial numbers and adds new line after each serial number, I want to create a following form:
1) user chooses how many items they want to scan
2) form opens with chosen number of fields
3) user starts scanning form field1 and after each scan it moves down to new field, because scanner adds "enter" newline.
4) I want to add these serial numbers to a query and modify them into my database.

How can I achieve all of these?

[kev1n]

Hi,

In order to maintain the focus and flow of the existing thread, I kindly request that you create a separate topic for your question. This will help others easily find and engage with the topic, and ensure that both discussions remain organised and on track.

Thank you for your understanding and cooperation!