#Frontend

So, one day you're working away at WidgetsDirect, the leading supplier of widget and widget accessories, when your boss asks you to develop the new customer facing portal to allow the client base to access the next generation of Widgets..... and he wants you to use Angular 1.x to read into the department's Caché server.

There's only one problem: You've never used Angular, and don't know how to make it talk to Caché.

This guide is going to walk through the process of setting up a full Angular stack which communicates with a Caché backend using JSON over REST.

or "So you just got yelled at by your boss, for sending him an unformatted Hello World webpage"

Our previous lesson ended with us serving a Message value obtained from a Caché REST service to the client, using Angular as a runtime. While there is a lot of moving parts involved in this process, the page is not especially exciting at the moment. Before we can start adding new features, we should take a step back and review our tools.

If you are developing applications that use CSP or Zen, or potentially any of the other InterSystems web-related stuff that's built on top of CSP, then it's important to know how to keep one particular secret.

A central part of the CSP security architecture is a server-side session key. "Server-side" because its value should never be revealed to the client that is issuing the web requests. If it is revealed, a malicious client might be able to use it to bypass your security and make your server do things you don't want it to.

This series of articles aims to address the following topics:

• Creation of a web application based on REST pages;
• Overview of some tools for tracing (debugging) HTTP requests;
• Switching from hyperevents to... hyperevents;
• Integration with jQuery File Upload;
• Conversion of JSON from the {id:1,parentId:1} format to the {id:1,children:[{}]} format for tree visualization;
• Integration with jQuery EasyUI (using datagrid and tree as examples);
• Other topics.

We finished our last lesson with our Widgets Direct page receiving a Welcome message as a property of a JSON object, which was unpacked and displayed on the page. However, we are on Lesson 3, and we still haven't had any talk of displaying widgets yet.

In our last lesson, we implemented a linkage to our WidgetAccessory class, and debugged some errors we encountered along the way. We now have our data being returned by REST, but what if we want to update or add new data to our application?

Hi, Community!

Please welcome the first session recording from Global Summit 2017:

Building Modern Web Applications

or "Bonus Breakage"

In our last lesson, we added a relationship between 2 persistent classes. We are clearly going to need to start creating REST Services to expose CRUD operations for each of these classes, but before we do that, we should really finish defining our linkages. We added code to our Widget toJSON to spool off related Accessory data, so we should really do the reciprocal and allow Accessories to return all Widgets that are compatible.

In our last lesson, we implemented a new REST Service to allow us to perform CRU operations on Widgets, and refactored our Controllers to allow the page setup to be decouple from the content.

Hi

I am working on a project that will interact with some software called ROS (Robot Operating System). One of the development challenges we have is as follows:

ROS uses web sockets... So one connect with ws://localhost:9090 to the web socket server. It starts off as http, but then "upgrades" to web socket. It then keeps open this "tunnel" for bi-directional communication..

I need something like a HTTP Outbound adapter, but the Web Socket version of it...

Does anyone have any experience in this area?

Nigel

At the end of our last lesson, we ended with our page displaying a nice (but garish) Angular Material Toolbar, and our Widget data displaying in a list of Material cards. Our page feels a bit static, and we already know that the large number of Widgets that we will be dealing with will not be especially usable on a static list. What can we do to help?

There are several options how to deliver user interface(UI) for DeepSee BI solutions. The most common approaches are:

• use native DeepSee Dashboards, get web UI in Zen and deliver it in your web apps.
• use DeepSee REST API, get and build your own UI widgets and dashboards.

The 1st approach is good because of the possibility to build BI dashboards without coding relatively fast, but you are limited with preset widgets library which is expandable but with a lot of development efforts.

The 2nd provides you the way to use any comprehensive js framework (D3, Highcharts, etc) to visualize your DeepSee data, but you need to code widgets and dashboards on your own.

Today I want to tell you about yet another approach which combines both listed above and provides Angular based web UI for DeepSee Dashboards - DeepSee Web library.

In our last lesson, we added a form to Edit our existing Widgets, and save them back to the server. However, our Form was not well structured and our Save button had no intelligence, and was not fully visible. So today, we will apply some Material components and Angular style to make the form more useful

This post is originally posted on GitHub.

This discussion is open to anyone who use or know about WebTerminal project. It is a result of a long story of the project development, testing and maintaining.