In addition to the web-hosted Wijmo Designer (read about the Wijmo Designer here), we just released a new extension for Visual Studio Code that targets Angular development. The Wijmo Designer extension for VS Code assists with Angular development by providing a WYSIWYG design surface for editing markup tags that represent Wijmo controls. It also supports the creation of new Wijmo markup tags by providing a standalone mode where you can experiment with control properties, child objects, and collections.
This video and step-by-step tutorial will show you how to use the Wijmo Designer Extension for Visual Studio Code.
Getting started using Wijmo Designer for Visual Studio Code
To get started, visit the Wijmo designer Demo page. To download, open Visual Studio Code Extensions tab and search Wijmo Designer. Install the extension and restart Visual Studio Code.
Open an Angular project
Open an existing Angular Project that uses Wijmo. Navigate to any component template containing a Wijmo control. Above every Wijmo tag you will see a CodeLens link. Clicking on this link will open the Wijmo Designer in a new tab.
Properties and themes
In this tab you can modify the Properties and apply themes to the controls. The changes made in the Preview pane will persist when navigating to other tabs in Visual Studio Code. Set the allowDragging Property to None to disable the dragging of Columns or Rows, and Remove the Row Headers by setting the headersVisibility Property to Column.
Once the changes are completed, we get a preview in the mark-up tab. If everything looks OK here, click the Save button and the original HTML template will be updated. The application now contains changes made from the Designer. Save the updated file and you are ready to view the changes in your application.
For more articles like this, demos, videos and tutorials, check out our blog page. Do you have a demo request? Leave us a comment below!
Troy Taylor