#Frontend

In this article, I would show how you can upload and download files from InterSystems products via http.

The questions about working with files over http arise fairly often on community and I'm usually linking to my FileServer project which demonstrates file upload/download but I'd like to talk a bit more on how we can serve and receive files from InterSystems products.

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 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

As web application gets more complex, more technologies are involved into the application development. Once it gets deployed in large scale the configuration gets more complex too. For sure one of the most difficult part of the story is the security. In a complex solution when independent servers are feeding single web pages with contents, it is indeed challenging to keep the integrity of such system. HTML5 introduced a (weak) security constraint, the Cross Origin Resource Sharing (CORS). This article tells how to enable CORS for CSP/ ZEN applications.

I enjoy the challenge of being in a contest. Currently I participate in InterSystems IRIS with REST API Programming Contest. My idea for this contest was to create an app to help me keep track of tasks for my Status Reports. I started with the template provided by Evgeny Shvarov. I created a persistent class for Tasks and a REST Dispatch class. I defined my URL map and I even figured out how to test my REST app using Postman.

Hi! My name is Sergei Sarkisian and I’m creating Angular frontend for more than 7 years working in InterSystems. As the Angular is very popular framework, our developers, customers and partners often choose it as part of the stack for their applications.

I would like to start series of articles which will cover different aspects of Angular: concepts, how-to, best practices, advanced topics and more. This series will target people who already familiar with Angular and wouldn’t cover basic concepts. As I’m in the process of building articles roadmap, I would like to begin with highlighting some important features in most recent Angular release.

Not everyone knows that InterSystems Caché has a built-in tool for code profiling called Caché Monitor.

Its main purpose (obviously) is the collection of statistics for programs running in Caché. It can provide statistics by program, as well as detailed Line-by-Line statistics for each program.

Using Caché Monitor

Let’s take a look at a potential use case for Caché Monitor and its key features. So, in order to start the profiler, you need to go to the terminal and switch to the namespace that you want to monitor, then launch the %SYS.MONLBL system routine:

This code snippet provides a ZEN page that downloads a stream from its database directly:

/// We assume that you have stored your data within this schema:
/// MyApp.Model.Storage: Filename,FileSize,Content,ContentType
Class zen.downloadStream Extends (%ZEN.Component.page,%CSP.StreamServer)
{
 
    /// Wrapper to get the id of the download, we assume that the id is passed to this zen page
    /// as a URI parameter, i.e.: MyApp.Downloads.cls?OID=1234
    ClassMethod GetId()
    {
        Quit $Get(%request.Data("OID",1))
    }
     
    /// Set the appropriate header for the file.
    ClassMethod OnPreHTTP() As %Boolean
    {
        Set tId = ..GetId()
     
        If ##Class(MyApp.Model.Storage).%ExistsId(tId) {
            Set tStream = ##Class(MyApp.Model.Storage).%OpenId(tId)
            // You could "guess" the content type by its file extension
            // or you can store it (before) in the database separately (like in this example).
            // Set Extension = $Piece(tStream.Filename,".",$Length(tStream.Filename,"."))
            // Set ContentType = ..FileClassify(Extension)
     
            Set %response.ContentType = tStream.ContentType
            Do %response.SetHeader("content-disposition","attachment; filename="_tStream.Filename)
            Do %response.SetHeader("Content-Length",tStream.FileSize)
        }
        Else {
            Set %response.Status="404 File Not Found"
            Quit 0
        }
        Quit $$$OK
    }
     
    ClassMethod OnPage() As %Status
    {
        Set Download = ##Class(MyApp.Model.Storage).%OpenId(..GetId())
        Do Download.Content.OutputToDevice()
        Quit $$$OK
    }
 
}

Link to code on GitHub

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

... but let’s first look at error handling.

... but let’s first take a look at two relatively small topics, and namely:

Creation of a multi-page REST application

We only have one page for now. How about adding one more? Said - done.

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

What is npm-iris?

N.P.M stands for "No Project Mess."

N.P.M. is a Project & Task Management app that uses InterSystems IRIS and Bootstrap 4.

No Project Mess is created to help developers and small business companies to reduce complexity in their daily problems, with a simple and intuitive projects and tasks management software.

It offers different views for your tasks, from a spreadsheet, kanban, calendar, or even Gantt!

In our last lesson, we added some formatting and validation to our Edit Widget form. So, now we are ready to add the ability to add new Widgets to our application. However, the great Widget Wars have come to an abrupt end, as Widget Direct has purchased its biggest competitor, WorldWideWidgets. In order to maintain some continuity, we need to display their catalog on our new application.