New post

#Frontend

13

Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data.

Learn more.

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.

19 11
5 6.6K

Hello guys,

I've got this piece of code which runs the method "WebMethod", that belongs to %SOAP.WebBase.cls.

It grabs the outcome from an internal webservice we have and after that, it writes into a file.

The thing is, when I browse the file contents, I realize that in the place where a special character should be, I see a question mark.

By querying the same webservice from a special soap tool called "SoapSonar" (I've been using this for years), the outcome shows up this special character (shows it properly).

1 16
0 4.9K

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.

16 23
3 4.7K
Announcement
· Jan 19, 2017
Caché WebTerminal v4 Release

Greetings, InterSystems community!

I am pleased to announce that the web terminal project, Caché WebTerminal version 4 gets its release! After long period of enhancing this web application from 2013, it came to the version 4, which features major stability and security improvements, intelligent autocomplete and syntax highlighting, convenient SQL mode and a lot of other useful features.

The goal of this article is to spread the knowledge about this project over the InterSystems community.

16 34
2 3.4K
Article
· Apr 17, 2017 4m read
Debugging Web

In this article I'll cover testing and debugging Caché web applications (mainly REST) with external tools. Second part covers Caché tools.

You wrote server-side code and want to test it from a client or already have a web application and it doesn't work. Here comes debugging. In this article I'll go from the easiest to use tools (browser) to the most comprehensive (packet analyzer), but first let's talk a little about most common errors and how they can be resolved.

16 2
5 3.3K 
Set httprequest=##class(%Net.HttpRequest).%New()
	Set httprequest.Server="www.intersystems.com"
	Do httprequest.Get("/")
	Do httprequest.HttpResponse.OutputToDevice()
	Do httprequest.Get("/cache/")
	Do httprequest.HttpResponse.OutputToDevice()

The above is the code which i found in this link http://docs.intersystems.com/latest/csp/documatic/%25CSP.Documatic.cls?P...

0 5
0 3.2K

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.

12 1
1 2.4K

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.

3 16
5 2.1K

I have a web application with html, css, js files (no ZEN/CSP).

Problem: after I update them on a server, Caché still servers old and cached version (browser Cache is disabled).

There is a manual cache purge in Gateway Settings, of course, but is there an automatic solution?

I'll be okay with disabling cache server-wide, but an application-wide solution would be better.

I don't want to host web app on a separate web server.

Here's my web app config:

0 5
0 2K

Hello Community,

I recently encountered a issue with Caché and I can't figure out where the problem is coming from.

I noticed that the license limit (200) was reached whenever I was opening my Studio (so it seems). When this occurs, I restart Caché (with the Cube in the Taskbar), and the number of license used is back to 1%, but grows back after. The time taken before the number of license grows back again looks pretty random.

Here is a couple of screenshots :

0 7
0 1.7K

We finished our last lesson with our Widgets Direct page iterating over a list of widgets, displaying an ID and a Name value. While we have been able to achieve this with only a small amount of coding, the page itself is not the most visually appealing place to be. The AngularJS framework is providing a powerful Model-View-Controller framework for our structure and logic, but it does not implement anything that will provide a nice UI experience.

6 3
0 1.6K

In the first article I started discussing RESTForms - REST API for your persistent classes. We talked about basic features, now, I'd like to discuss advanced features - mainly queries capabilites:

  • Basic queries
  • Query arguments
  • Custom queries

Queries

Queries allow getting slices of data, based on arbitrary criteria. There are two query types in RESTForms:

  • Basic queries work for all RESTForms classes once defined and they differ only by the field list
  • Custom queries work only for the classes in which they are specified and available, but the developer has full access to query text
3 2
2 1.6K

or "Didn't you say you would cover Persistent Objects in Part 5, Chris?"

Yes, that was the plan. This is a pretty important topic, so it get's its own Article

Up until now, we've display widget JSON that has been created by a basic loop. Clearly this isn't of much value. Now we have our stack connected together, and we can see that the data is flowing to the Welcome page, it's time to complete the stack and start feeding our service from "real" data.

2 4
0 1.5K

Sometimes you can face the situation when you did update the web app on Caché server but you cannot get the newest version of the app in a browser.

Here are couple recipes which help me to solve it. From simplest to more sophisticated and not obvious.

1. Refresh page in a browser

In Chrome it is Ctrl+R or 'Refresh' button. Obvious, but helpful.

2. Hard reset in a browser

If you are in Chrome, open Developer tools

2 1
0 1.4K

or "Things are going to break"

We left our application over the weekend, secure in the knowledge that it was returning data from our primary persistent class, User.Widget. However, Widgets Direct are the premier supplier of both Widgets AND Widget Accessories, so we should really start working on adding these Accessories to our application.

2 3
0 1.3K

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?

3 0
0 1.2K
Question
· May 12, 2017
Web Sockets

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

3 14
1 1.1K

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.

3 2
1 1.1K

In my country we speak in spanish. My developing machine uses windows 8.1

I made a nice looking html mock-up using angular material (in Atom, writing in UTF-8). I just moved that mock-up to the CSP folder inside Ensemble and it shows the typical weird characters of character encoding problems.

Have you had an issue like this before?

My temporal solution for the html files: I just configured Atom to read the files in Windows 1252 encoding.

0 6
0 974

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.

5 1
1 935