Wijmo Designer

This extension provides a visual designer for Wijmo controls in Angular projects. Within HTML files, it inserts a CodeLens link above each tag representing a Wijmo control. Clicking the link opens the Wijmo Designer in a separate tab, and initializes it based on the associated markup. After making changes in the designer, click the Save button to update the original HTML file with the modified Angular tags.

You can also open the visual designer in standalone mode by running the Wijmo Designer command from the command palette. In this mode, you can use the Toolbox button to display a panel of available controls, organized by module. Click a control name to instantiate it on the design surface with sample data. You can also use the Themes button to experiment with predefined Wijmo themes. Although there is no Save button in standalone mode, you can use the Source View button to display Angular tags for the controls on the design surface, then copy and paste them as needed.

This extension requires Visual Studio Code 1.23.0 or greater.

Persistent Data

When invoked from a CodeLens link in a source file, the designer keeps track of its state on a per-file, per-workspace basis until you close its tab (or VS Code itself). You can freely switch tabs and return to the designer at any time, and its contents will be preserved.

Note that the extension remembers the document range of the Angular tag from which it was invoked. If you subsequently modify the original source file, you should revisit the CodeLens link to refresh the associated designer tab. Otherwise, if you just switch to the designer tab and click Save, the update may occur in the wrong place.

When invoked in standalone mode from the command palette, the designer keeps track of its state permanently on a per-workspace basis, even if you close and reopen VS Code.

Configuration

This extension does not contribute any configuration settings. However, when it updates an HTML source file, the format of the modified tag is controlled by the setting html.format.wrapAttributes. For best results, choose a value other than auto, such as force-aligned.

Limitations

The following Wijmo controls are not supported in this version:

• Menu
• Popup
• TabPanel
• MultiRow
• PdfViewer
• ReportViewer

Wijmo control tags that contain <ng-template> directives are not supported in this version.

If the markup for a Wijmo control property specifies a binding instead of a literal value, the corresponding property editor in the designer displays the binding in a read-only text box in italics. Bindings are preserved during save operations; however, there is no interface for creating or editing them in the designer.

Event bindings and two-way bindings used in Wijmo control tags are preserved during save operations; however, there is no interface for creating or editing them in the designer.

Angular structural directives such as *ngIf that occur within Wijmo control tags are preserved during save operations; however, there is no interface for creating or editing them in the designer.

The following tags are preserved during save operations; however, there is no interface for creating or editing them in the designer:

• wj-flex-line-marker
• wj-flex-chart-range-selector
• wj-flex-grid-filter

The following tags are ignored and will not be preserved during save operations:

• wj-flex-sheet-filter
• wj-group-panel
• wj-flex-chart-animation
• wj-flex-chart-annotation-layer
• wj-flex-chart-gestures
• wj-flex-chart-plot-area

References

• About Wijmo
• Blog: Angular with Wijmo and NPM
• Blog: Wijmo Designer Extension