How to show Allowed types on Content Area – Grzegorz Wiecheć

Nice solution for EPiServer editors to be able to see which kind of content types that can be added to a content area in EPiServer. This solution is for older Episerver versions e.g. around 2015.

In EPiServer 11+ the js is minifed and inside a zip file at this location:
[EPiServer root folder]\modules\_protected\CMS\CMS.zip\11.4.6\ClientResources\epi-cms\contentediting\editors
I wont touch that for now but if someone does, please let us all know.

Content References list with allowed types

Read more here: How to show Allowed types on Content Area – Grzegorz Wiecheć

How to include and use jQuery in Angular CLI project

Tested in angular version 7:

  1. install jquery:
    npm install jquery
    install jquery typescript intellisense:
    npm install @types/jquery
  2. edit the angular.json file in root folder:
    in the architect / build / scripts location, add this:

  3. To use jquery inside a component.ts add this import at the top:
    import $ from ‘jquery’;

    Example code to check for functionality:
    component html:

    component.ts:

    Click on the button should fade out and fade in the entire page.

Source: How to include and use jQuery in Angular CLI project

Open Source JavaScript Test Runner | Cypress.io

For end to end testing of websites, should be really simple to use and easier to setup than Selenium. Write javascript to execute tests.

Until now, end-to-end testing wasn’t easy. It was the part developers hated.
Not anymore. Cypress makes setting up, writing, running and debugging tests easy.

En example:

This will visit the Cypress example site, look for an element with the text “hello world” and fail the test if it doesn’t exist.

Source: Open Source JavaScript Test Runner | Cypress.io

json2typescript – npm

NPM Package for converting from JSON to TypeScript object.

json2typescript In Angular 2 applications, everyone consumes JSON API’s from an external source. Type checking and object mapping is only possible in TypeScript, but not in the JavaScript runtime. As the API may change at any point, it is important for larger projects to verify the consumed data. json2typescript is a small package containing a helper class that maps JSON objects to an instance of a TypeScript class. After compiling to JavaScript, the result will still be an instance of this class. One big advantage of this approach is, that you can also use methods of this class.

Source: json2typescript – npm

cors-proxy-server – npm

I wanted to try out some Angular code against a demo odata service, but when requesting data from another domain in a web browser (the angular context) you might get:

Access to XMLHttpRequest at ‘http://services.odata.org/V4/OData/OData.svc/Products?$format=json’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request.

To get around this problem you could use a node proxy like this one:

Source: cors-proxy-server – npm

Install and start it up. Now we can call the odata service by prepending the proxy url before the actual api endpoint like this:
http://localhost:9090/http://services.odata.org/V4/OData/OData.svc/Products

Notice the double http://

The entire CORS problem can be summarized like this:

The web browser will prevent javascript to get a response from the service at domain x if that server does not explicitly say its ok to respond the remote caller. In our case our source domain is ‘localhost’ and the services.odata.org haven’t added that as a valid domain to respond to according to the web browser.

More info regarding CORS here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Angular – Template Binding Syntax

Binding syntax: An overview

Data binding is a mechanism for coordinating what users see, with application data values. While you could push values to and pull values from HTML, the application is easier to write, read, and maintain if you turn these chores over to a binding framework. You simply declare bindings between binding sources and target HTML elements and let the framework do the work.

Angular provides many kinds of data binding. This guide covers most of them, after a high-level view of Angular data binding and its syntax.

Binding types can be grouped into three categories distinguished by the direction of data flow: from the source-to-view, from view-to-source, and in the two-way sequence: view-to-source-to-view:

Source: Angular – Template Syntax