Need Direction on Web App to Modify Text File

I know this concept is pretty simple but need someone to help point me in the right direction and if what I want can be accomplished using just HTML, CSS, and JavaScript.

Problem:
In day to day work in VoIP, I constantly have to modify XML config files for phones to the client preference. Example, change the time format from 24 hour to 12 hour, by modifying the value of a variable from 0 to 1. When dealing with dozens of custom configs, searching and editing each individually becomes a hassle. Also, those I work with aren’t very code savvy and make error when they try to change values themselves.

Solution:
Create a web app that lists all the variables we can customize. The user will either check off radio buttons or input forms and it will alter those specific values in the XML config file for the form.

Where I Need Help::
I’m not sure where to start. I have a basic layout of the variables and options available. I’m not sure how to have the actual XML config file altered and spit out for download (or copy/paste) after the user hits submit. I would appreciate if someone could guide me in the right direction, help with resources I can read, or ideally work in tandem with someone of a similar or higher skill level on accomplishing this.

I know a professional can knock this out in 5 mins front to back but I’m pretty much a noob here. I know HTML and CSS fairly well but am still a novice to JavaScript. Would I need Node.js or more DOM knowledge… please help!

Here’s how I would approach this:

On your frontend, you have a web form asking the user for input, for the different settings/parameters that need to be set/unset.

When user clicks SUBMIT on the form, the whole form contents are sent to a backend program.

On your server, a program processes the form inputs, does validation, etc.

You also have a static template text file which contains your base XML configuration files. The only difference being, the actual values have placeholders in them. By having the template as a separate text file, you can easily update the formatting, add future fields, etc.

Example:

<?xml version="1.0"?>
<catalog>
   <book id="$$bookid$$">
      <author>$$author$$</author>
      <title>$$title$$</title>
      <genre>$$genre$$</genre>
      <price>$$price$$</price>
   </book>
</xml>

Your backend program reads this text file, and stores content in memory/variable.

Then your program processes the form variables, and just does a find/replace

value of bookid from form —> replace $$bookid$$ text string
value of author entered from form —> replace $$author$$ text string
etc…

At the end of your replace operation, you now have an XML file that contains the correct settings for each xml field.

Now it’s just a matter of either outputting the contents of this variable on your browser screen (for cut and paste), or sending to the user a downloadable XML file.

1 Like

Now doing this sort of thing without a server backend, will need a few adjustments.

For one, the browser can’t read the contents of a text file directly from the disk. (security issue)

So on your web form, you’ll need to also upload the text file template.
Javascript reads the contents of the text file, assign it’s whole content to a memory variable
and then do your string replace operation with values from the form, into the placeholders in your uploaded text file.

Then using either jQuery (or some 2-way data binding framework), update your html page with the content of this variable. Voila… now you have an xml formatted text on your screen with the correct values for each key.

1 Like

Wow! This is the exact response I was looking for. Thank you for taking the time out of your day for helping me with this, it’s truly very appreciated!

I didn’t know if I would be forced to use PHP to modify a text file or if I could just use the actual XML file as a string in JS instead (which seems I can do this). So essentially I would be doing a find/replace and have pre-formatted variables in the XML string (or seperate variables to concatenate together to form the whole XML config I presume). I like this approach a lot.

Thanks for helping me out!

You could, but if the format/content of the XML file changes then it’s more involved changing the JS code… very prone to mistake.

The nice thing about the separate text file template is you can pretty much see how the output will look like, and anybody (even a non techy) can easily update that text file.

Yep!

Thanks! You’ve been extremely helpful and yes I can see how it would be very prone to mistakes and possible format issues down the road (especially as the template updates to new firmware). I’m glad you pointed that out because I would have probably taken the lazy route :neutral_face:. I can avoid that now lol.

I never work with xml, but I think if you are ok with the copy paste method, you could actually do all this on the front end. You would simply link the submit button to a javascript function and piece together the text in a simple textfield. Atleast that is the simplest approach IMO.

1 Like

This is also a good idea, thank you! For me it’s always the simple stuff that I end up making over-complicated because there’s so many ways to approach this. The copy/paste method would work perfectly considering you’ll have to copy/paste the actual code on the front-end of the PBX to modify/create the existing templates there. The only reason I would consider a download is to allow users and my colleagues to hoard a bunch of configs for future use… not necessary really.

1 Like

Yeah but it would be just as easy to copy the code into a file and save it for later use. :slight_smile:

1 Like

If you’re using JS as your back-end (Node/Express), you can probably send that form through a template language (moustache, handlebars, nunjucks, etc.) and save yourself some find/replace and Regex steps.

I think Twig is available if you go PHP.

Pass it through a template engine and then save it down.

1 Like

@therealcode Note that all browsers have an XML parser built in, that’s how core parts of them work, and you can read/build XML structures in exactly the same way you would deal with the DOM. You should not be search/replacing, there is no need; as stated, it isn’t something you should be doing. Using the parser in vanilla JS is little bit of a pain if you’re a beginner, but parsers are trivially easy to write so there are loads of small libraries if you have a search around on google, github etc. For example, jQuery has one built in - here’s a tiny little example of reading and XML file and spitting the values out: https://codepen.io/DanielCouper/pen/RgvQYx

1 Like

Thanks a ton for the information. Def not a fan of regex (this early on that is - confusing). Will look into what you suggested tonight and see if I could put it to work. Thanks!