Jun 4

Written by: Michael Washington
6/4/2017 9:23 AM  RssIcon

image

Radzen is:

“…a rapid application development solution for Angular 2[and 4]. It enables the creation of responsive web apps without writing HTML, CSS or JavaScript…”

As of this writing, there are some additional features that bring it closer to the features that long time users of Visual Studio LightSwitch are used to. Namely, the page creation wizard, the ability to edit the source code using Visual Studio, and the ability to create custom components.

Page Creation Wizard

image

Let’s say we add a new table to our Radzen application.

image

We can then open up Radzen, and select Data.

image

Select the existing data source.

image

We then confirm the data source type and select Infer Schema.

image

We now have the option to not automatically create pages (we can now create only the ones we need when we need them).

We can also select only the tables and fields we want to add to the data source (many of us have huge databases with a lot of tables and fields we don’t want in the application).

image

Returning to the main page in Radzen, we can now select Create New Page.

image

This allows us to select the new View/Add/Edit pages template.

We then select our database table for Page Schema and click Save.

image

The pages are created.

image

We can edit the pages, for example to hide the Id column.

image

Next, we select Run.

image

The Output window allows you to see what's happening.

image

The application displays Smile

Note: See this page to deploy the application to a production web server.

Edit Source Code in Visual Studio

image

You can open the folder your Radzen project is contained in…

image

If you have Visual Studio 2017 (or higher) you can then right-click on that folder and select Open in Visual Studio.

image

You can see and edit all of the code.

Note, you can see the Radzen Architecture at the following link:

http://www.radzen.com/documentation/architecture/

This will explain what pages you can and cannot edit.

Create Custom Components

Radzen allows you to create custom components.

This allows you to implement functionality that may not otherwise be possible to do using only the normal Radzen application.

image

For example, we can create a file called custom.component.ts in the client/src/app directory using the following code:

 

import { EventEmitter, Component, Input, Output } from '@angular/core';
@Component({
  selector: 'my-component',
  template: `
    <button (click)="onClick()">{{ text }}</button>
  `
})
export class CustomComponent {
  @Input() text: string;
  @Output() navigate = new EventEmitter();
  onClick() {
    this.navigate.next();
  }
} 

 

image

We then register the component in the app.module.ts file.

image

Next, we create a new page.

image

We search for the HTML control and drop it on the page.

image

We select the control and set its Content property to the following:

 

<my-component text="Go To LightSwitchHelpWebsite.com" (navigate)="onNavigate()"></my-component>

 

image

We now stop the application and run it again.

image

When we return to Visual Studio, and refresh the Solution Explorer, we see that new pages have been created.

image

We can open the .ts file that does not have “-generated.component.ts” in its name and safely make edits, knowing that they will not be overwritten by Radzen.

image

Without refreshing the web browser, after a few moments, the new code will automatically be updated and the new code will work.

 

Links

Watch the video about Radzen here:

https://www.youtube.com/watch?v=_1USmcmlz58&feature=youtu.be

The free trial is here:

http://www.radzen.com/#download

The documentation is here:

http://www.radzen.com/documentation/

The Radzen Architecture:

http://www.radzen.com/documentation/architecture/

Creating Custom Components:

http://www.radzen.com/documentation/custom-component/

The cost is $599

Tags: Radzen
Categories:

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation