Last week I continued with the development of the customer page. Since I had already done the parts of the customer form before, I will continue to complete the customer form. Customer forms contain multiple data that needs to be inserted into, including name, contact number, remark, email, address lines, address options, address types, and detail contacts. This data is stored in one array per customer and some data will have multiple arrays. For example, customer 1 has multiple addresses, address options, fax, address contact and address type in one form. So I need to make the addresses work as an array within the form.
The solution to this problem is to use the “.map” function which allows the array to loop and display one at a time. When the array displays one by one, it is much easier for me to make the form. It is because not only can reduce the code required, but also easier to handle user input. The columns that the user input is the same, but only the array changes. For example, the first addresses will store data in “Addresses [1]”, while the second addresses will store data in “Addresses [2]”. The user can add as many addresses as they like when creating the customer data. I had tested the functions and the data is stored correctly in the array, which helps me to manage the data.
Besides, I also make a simple button that allows the user to click and add the empty address column. It will display like 2 address array per row, which will be different with the prototype I created before. In the prototype, I make the address array to be shown on the prompt page, but I found it difficult to develop because I already make the form prompt. To solve this problem, I decided to make the address column scrollable. This not only minimizes the number of clicks, but also keeps the length of the prompt page to a minimum. The prompt page will only have the exact same size and will not get longer and longer as you add more and more customer addresses.
Also, at the beginning of the coding, the address loop is in the same file as the other column. This makes the file very long. So I decided to put the functions related to addresses in separate files. However, the length of the file is still very long, I need to further minimize the length and move some functions such as address option, address type, address line and fax contact to new files. Finally, the length of the file has been reduced and the other file also has a shorter length. The files should be less complex and easier to debug. If one of the files has an error, it will be easier to identify and fix.
Finally, the form for the customer page is almost finished. I have managed to add multiple addresses to a single customer record. I will move on to using the API in the next few weeks. The API is a new genre for me and I may face difficulties in the following weeks.