Skip to main content

Study of an AngularJS application: Feeding Excel based data into an SVG Flowchart with AngularJS and NodeJS

Reference article
Implementing a Flowchart with SVG and AngularJS
Source code from original article is here.
 
Customization goals
a) Feed the SVG flowchart nodes from excel datasheet
b) Understand a bit of the AngularJS and NodeJS client-server communication
c) Learn javascript debugging on server side as well as client side using VS Code editor
As a beginner to AngularJS-NodeJS, the customization is based on a partial study of the original article.


 
Most challenging challenge as a dummy
There was a space of time when I thought I was publishing the server side JSON data to the same URL as the front-end html page. And then trying to debug it and not knowing why: in one case the data was coming from the server side only, while in the other case it was coming from mocked data on client side. Kept on looking for whether data was getting lost, or did I need routing. There were debug sessions where both server side and client side individually appeared working correctly.
Some days later I realized I needed to consume server response data from different URL (it had to be different than URL of Index HTML page being viewed from browser).
 
Application environment
a) OS: Windows 10 desktop
b) Code editor: Visual Studio Code
c) Server-side: NodeJS + ExpressJS
d) Client-side: AngularJS, SVG, JSON
e) Application Data source: Excel
f) Server Data-publish format: JSON




 
Snaps of the working application
1. Start the node server from the terminal:
image_thumb43
server is ready and starts listening on configured port:
image_thumb44


2. Launch a browser and navigate to the application’s configured URL:
image_thumb45
a 2-paned application opens up with the left pane showing the json data and the right pane showing the SVG nodes read from excel sheet:
image_thumb46
the nodes can be rearranged by mouse drag and drop:
image_thumb48




3. Delete one of the nodes from the feeder excel sheet:
image_thumb49
image_thumb50
refresh the browser and see the updated nodes – no server restart required:
image_thumb51



4. Check the logs and see that only the server side logging done is visible:
image_thumb52

 
When can we see the client side logs?
Client side debugging is possible using VS Code editor. Some configurations are required – please refer the launch.json file from the customized application code base.
Also required is a VS Code extension - Debugger for Chrome:
image_thumb53
as well as the remote debugging port setting while launching Chrome:
image_thumb35














Labels:

Comments

Post a Comment

Popular posts from this blog

Experimenting with Visio and VBScript

This diagram is created:               using this code:                                                                         Copy the code: Option Explicit Dim strVSDPath, filesys Dim vsoApplication, vsoDocument, vsoPages, vsoPage Dim vsoMaster1, vsoMaster2, vsoStencil Dim vsoShape1, vsoShape2, vsoConnector1 Dim itr Const visAutoConnectDirDown = 2     'Connect down. Const visAutoConnectDirLeft = 3     'Connect to the left. Const visAutoConnectDirNone = 0     'Connect without relocating the shapes. Const visAutoConnectDirRight = 4     'Connect to the right. Const visAutoConnectDirUp = 1         'Connect up. ' Visio file to be created. strVSDPath = "D:\Workspace_Visio\TestRunFlow.vsd" 'delete any previously existing Suite file Set filesys = CreateObject("Scripting.FileSystemObject") If filesys.FileExists(strVSDPath) Then     filesys.DeleteFile strVSDPath End If Set filesys = Nothing &#
Post a Comment
Read more

QTP – search sub-folders for existence of QTP scripts

  Suppose we want to report on all subfolders in a specific root folder that contain script files. Consider the example folder structure here – ODBC_MYSQL, ODBC_SQLEXPRESS and Test1 are the folders that have QTP scripts: Here’s a VBScript program that takes the root (start) folder as input, and iterates all subfolders recursively to report on the ones that are actual QTP script folders: Note: This program can be run directly as a VBScript program, or from within a QTP script by toggling the comment between lines 17 and 18. (p.s.: if Print statement does not work on specific version of QTP, use the Msgbox statement. For real world test automation projects, do not use either – to avoid human intervention!) On running the program, Folders across various levels (Level 2, 3) get reported!
2 comments
Read more

Excel Automation and a palatable QTP Suite

  Excel automation and VBScript can be used to create a test suite that can control the run sequence of QTP scripts and present a Summary report of the automation run cycle. Its simple enough to double-click an icon and the VBScript program will create an excel sheet, populated with all the scripts from a Test folder. Here’s the folder structure: Click here to get the files.   The CreateSuite.vbs program creates an excel sheet .. .. and populates it with all the QTP scripts from the Tests folder (folder hierarchy within the Tests folder does not matter, a valid script folder will be fetched). Here’s how the excel sheet looks after running the CreateSuite program: This Test Suite has been created in the TestSuite folder, as the Suite.xls file: Once the list of tests is available, one can choose to configure a subset of the listed tests to be run, like in the case below, we turn off the fourth test: Now that the list of tests to be run is ready, we
Post a Comment
Read more