We are super excited to finally release reusable design elements! We call them Screenparts, which quite literally means reusable parts of your screen.

After we released version 2, the Indigo Studio team has continued to enhance version 2 through updates. And this continues to be our model; consistently adding value to the product you purchased. If our perpetual licensing model was not clear before, it should be clearer now. All our users who purchased an Indigo Studio license for version 2 get a free upgrade to version 3! And that means you can update and use screenparts as of today.

Learn more about how screenparts are related to screens and storyboards

Five things you should know about Screenparts

In this post I will discuss some of the core capabilities offered with Screenparts. In other words, the new and shiny bits!

1. Easily Create New Screenparts

Screenparts are designed pretty much exactly like screens. Instead of screen, select Screenpart from the new menu. You can also right-click on the project tab and create one from the context menu. Once you have the Screenpart designer fired up, add UI elements to the design surface to design your Screenpart.

The approach described above implies that you know upfront what needs to be reusable (i.e., Screenpart). But we imagine the following workflow to be equally, if not more, common. You are in the thick of designing your screens . You finish one (e.g. Screen A) and proceed to create a new screen (e.g., Screen B) as a result of navigate to interaction. And right then you realize that there are UI elements that you customized on screen A, which you also need on Screen B. Of course you can copy and paste these elements, but that entails a maintenance burden during design iteration.

Instead of copying and pasting directly, select the UI elements you need, and Convert to Screenpart first. This automatically adds the selected elements to the Screenpart tab in your toolbox. At the same time this replaces the selected UI elements with a Screenpart instance. Copy paste this instance instead. With this approach, you can change the source Screenpart to update all its instances on different screens. Maintenance burden be gone!

Watch Video on Creating and Customizing Screenparts

2. You can customize Screenpart Instances

Any time you add a Screenpart to a screen, Indigo creates an instance of the source Screenpart. This approach provides you with complete creative control on how the Screenpart instance looks and behaves on a particular screen. Want to change the color, size or position of something? Simply double click to edit the instance and make changes you desire. You can just as easily reset it to match the source Screenpart.

3. Design Screenparts to behave like Interactive Widgets

You can package visuals and interactions to be reusable as screenparts. Indigo Studio achieves this with the help of screenpart states which are created on the source screenpart. Design Screenpart states exactly like you do for screens. When you run the prototype, users will be able to interact with the interactions contained inside screenpart. For example, simulating a creating a new account experience inside a sign in window.

Watch Video on Screenparts as Interactive Widgets

4. Organizing your Screenparts with Categories

Right-Clicking on screenparts in your screenpart tab reveals the context menu. Use the add/edit screenpart category option to create new categories or add screenparts to existing categories. You can also add a screenpart to multiple categories.

Watch video on Organizing Screenparts

5. Exporting/Sharing Screenpart Libraries

Once you have a nice little screenpart library created, you can use it on other projects you have. Select the screenparts you need in the project home, and export. Export as Indigo Files & Assets and point the export location to a different Indigo Studio Project. If you have any images inside your screenpart, we include them in the assets folder.

When you create and save Screenparts, we automatically create a new subfolder under your project folder called "Screenparts." This should make it easier for you to locate all the screenparts in your project. You can of course filter your project home/gallery view to show just screenparts.

You can also create a zip file to email this library to someone on your team. For now, each project will need its own screenpart library to work correctly. As in, it should be available inside the folder for the Indigo project you are working on.

Watch video on Exporting Screenparts

How to Get This update?

Here's how to update the version of Indigo Studio installed on your machine:

• If you have the option to automatically check for updates on startup checked, you should see a dialog box pop up when you launch Indigo. Simply click update, and Indigo Studio will do the rest. This is the easier approach.
• If for some reason you chose not to automatically check for updates, go to MENU > HELP & ABOUT and use the "CHECK FOR UPDATES" option. 
   

Starting a New Trial for Version 3

If you have tried version 2 in the past, and used up your 30-day trial, you can still start a new trial for this major version for another 30 days! You can do this in the following two ways:

• If you have days remaining in your 30-day trial period for the current version (e.g., version 2, update 5), use the check for update option inside the app. You will be able to start a fresh trial for the next major version (e.g., Version 3)
• If you have used up the 30 day trial for the previous major version (e.g., Version 2), simply download and install Indigo Studio from our website (http://indigo.infragistics.com). This will also allow you to start a new trial.

If you already own an Indigo Studio License for a specific version, you can trial the latest version and then go back to my licensed version.

As explained in our perpetual license model, there is a good chance that version 3 is a free upgrade. We check this for you when you try to update from inside the app and will inform you accordingly.

If your license does not allow a free upgrade, you can still start a new trial for the latest version! When your 30-day period runs out, simply install the older version again. You can grab the installer for the version you own from my keys/downloads section on our website. You won't even have to re-enter your license key in most cases.

Please note: Screenparts are exclusive to Indigo Studio version 3 and above, so if you go back to an older version, screens that use Screenparts will not be compatible.

About Indigo Studio for Interaction Prototyping

Don't have Indigo Studio? Download a free 30-day trial which will let you try all of the prototyping goodness.

Download Indigo Studio

Looking to suggest improvements and new ideas for Indigo Studio?

Submit a new idea

If for some reason you are having trouble with Indigo Studio, check out our help topics, forums or contact support.

Get Support

Follow us on Twitter @indigodesigned

Screenpart was always a critical piece of our prototyping vision for Indigo Studio. Ever since we decided to build Indigo Studio, screenpart was always there, sharing the stage with storyboards and screens. The following graphic tries to summarize the inter-relationship:

We love the UX process, and it exists for a reason. As designers, what we discover first is the story-of-use and stories that are desired. I tend to agree with Thomas Erickson's explanation. He explains it quite well, especially the part about story-gathering as an early step in the design process. Furthering this view, I have always seen stories as not bounded by the application, but more about how the application interacts in the real world. We design it such that the application (prototype) participates in this story, and in doing so contributes to a better overall experience. And the only way we know this happens is by evaluating the prototypes we create with users, learning and iterating. We need to validate whether we are indeed building the right experience, and hence Indigo Studio for Interaction Prototyping!

Storyboard

In Indigo Studio, storyboard is one way to represent a broad vision for your prototype. It blends UI prototypes (screens) inside a real world context (scenes). More literally, you can add UI screens that you designed as a step in your story or add it inside any scene that shows a device context. The toolbox on the storyboard designer shows two tabs consisting of scenes and screens to help depict stories.

Screen

Screens, as we have defined it, are used to design your wireframes, pages, windows, pop-ups--whatever you want to call your UI-Views. These serve as the building block for your prototype. And if you are familiar with Indigo Studio, you can also create states of a particular screen when you add an interaction. And by using screen states, you never have to re-draw or maintain all your UI-views. All you need is to design the changes you would like to see based on the user interaction. To support designing UI-Screens, the toolbox on the screen-designer shows two tabs, UI Elements and Screenparts.

Screenpart

Screenparts, as we mentioned before are reusable parts of your screens. These increase your efficiency, by letting you create custom UI elements once, and then reuse them on any other screen in your project. You can bundle up reusable interactions as well as visuals, and even use them as masters. The toolbox on the Screenpart-designer shows the UI elements, which you can use to create a Screenpart.

Learn more about using Screenparts

Prototyping using Indigo Studio

To summarize, Screenparts can be added inside screens, and screens can be added inside of storyboards. And once this is done, you can continue to make changes to the screen to automatically update the storyboard, or make changes to the source Screenpart and automatically update the Screens.

Indigo Studio does not force you use to adopt a particular design workflow. By this we mean that you can take any of the three paths offered in the NEW menu. You can start designing any of the three--storyboard, screen or screenpart. Even better if you create these just when you need them in your workflow. As you design screens, these automatically show up in the storyboard designer toolbox. As you design screenparts, these automatically show up under the screenparts tab in your screen-designer. We aspire to help keep you focused on your design story and your prototype. Design bits when you need them!

I hope this explanation along with the graphic above helps relate the three members in Indigo Studio, and their reason to exist. Now go design something!

How to Get This update?

Here's how to update the version of Indigo Studio installed on your machine:

• If you have the option to automatically check for updates on startup checked, you should see a dialog box pop up when you launch Indigo. Simply click update, and Indigo Studio will do the rest. This is the easier approach.
• If for some reason you chose not to automatically check for updates, go to MENU > HELP & ABOUT and use the "CHECK FOR UPDATES" option.

About Indigo Studio for Interaction Prototyping

Don't have Indigo Studio? Download a free 30-day trial which will let you try all of the prototyping goodness.

Download Indigo Studio

Looking to suggest improvements and new ideas for Indigo Studio?

Submit a new idea

If for some reason you are having trouble with Indigo Studio, check out our help topics, forums or contact support.

Get Support

Follow us on Twitter @indigodesigned

We are excited to announce that AngularJS support for Ignite UI is now available in a preview state!

You can work with the running samples as well as get your hand on the code on GitHub. We'd love to have you clone the code and tell us what you think.

Before you get started, here's a quick primer on what's happening when you use these directives.

Using the Directives

You can now use Ignite UI controls in your Angular pages and interact with the controls as Angular directives. For instance, in order to use the igGrid you can use the following syntax to declare a very bare-bones grid on the page:

...where northwind is an object array that exists on the controller's $scope and could be a result of an async request, but in our samples its just local data for now. The resulting grid looks something like this:

As the Angular application is loaded, the directives are recognized and processed allowing you to declare a grid with this simple syntax. So by declaring the control this way, the grid is instantiated and the current scope's northwind member is set to the grid's data source.

Now the above example is borderline interesting, but what about something a bit more involved which sets up some custom columns and uses some advanced features? This is the markup used in the grid sample:

Here you can see how even a relatively complex grid is created in a highly-readable fashion using custom HTML syntax - all thanks to the directive. Notice how you have full flexibility to define all the same custom column settings and feature values as you would had you created the grid in traditional jQuery code or via the MVC wrappers.

Full Two-Way Data Binding

One of the most compelling features of Angular itself is the two-way data binding based off POJOs. As you can see in the running sample, the igGrid (and combo, etc.) supports full two-way databinding even while features like sorting, filtering, paging and more are enabled on the grid.

The data binding implemented for Ignite UI supports both keeping in sync changes in the UI reflected on the model, as well as from the model to the UI. Beyond just keeping the data in sync, when changes in the model occur, the UI is updated at specific points without having to re-render the entire page. This approach is quicker, more efficient and a bit more sophisticated than what is offered by other third-party control vendors for their Angular support.

Available Directives

There are directives available for many of the Ignite UI controls. Here's the full list with associated links to the running samples:

• igGrid
• igCombo
• igDataChart
• igDialog
• igEditors
• igMap
• igTree
• igUpload
• igVideoPlayer

General Notes

Just a few things to keep in mind:

• In the past some of our work with Angular required you to use a fork of Angular, but our solution now works with out-of-the-box Angular
• The code is currently in a preview state, so expect to see some odd behavior for a little while. We'd love to hear your feedback so we know how to better direct our efforts.

It's super hard to keep up with the news every week, especially in an industry like ours where everything changes so rapidly.

If you missed out the past week because you were busy in your own world, here are the top five articles from the Infragistics Social Network, as selected by your fellow Infragistics Community Members!

1. Why iOS notifications are ruining my marriage (and UX solutions)(Hacking UI)

2. How to be a Great Software Developer(Peter Nixey)

3. State Machines in F# and C#(Without the Loop)

4. Seven Things Your Boss Needs to Know About UX(UX Magazine)

5. Top 6 List of Programming Top 10 Lists(Coding Horror)

And there you have it! Enjoy!

With the most recent release of Infragistics WPF 14.1, we announced the availability of a new xamSpreadsheet control as a CTP (Community Technology Preview).  Since this announcement, I have been getting a number of question regarding how to even get started using the control.  Since it’s a CTP control, it has no documentation or samples, and things can be a little hard to figure out.  So let’s take a quick look at the most basic task of the xamSpreadsheet, and that is loading an Excel document.

Start by creating a new WPF application, and be sure to target .NET 4.0 or above.  Now, the first thing you need to know is where to find this new control.  In the past, Infragistics would release CTP controls as a separate download.  Not anymore!  We now include the CTP controls in the Visual Studio toolbox.  This makes it easier for you to get the control and start playing with it.  So, in order to use the xamSpreadsheet in your application, simply find it in the Visual Studio toolbox titled “Infragistics 14.1  WPF”.

Once you have located the xamSpreadsheet control in the toolbox, simply drag it on to your design surface.  Immediately, you will see a control that resembles Microsoft Excel render in the Visual Studio Designer

In the XAML markup, let’s give our xamSpreadsheet instance a  name so that we can reference it in the code-behind.

Open up the code-behind, and let’s add some code to load an Excel file.  Since the xamSpreadsheet is built on top of our Excel Library, we will need to have an instance of a Workbook object to give the xamSpreadsheet control.

I added an event handler to the Loaded event of the Window.  In this handler, I am simply opening a file, that I have included in the Visual Studio Solution, using the File.Open method.  This method returns a stream, which will then be used by the static Workbook.Load method in order to instantiate a Workbook object instance.  Once this instance is created, it is assigned to the xamSpreadSheet.Workbook property.  This is what causes the excel document to be rendered in the control.

As you can see, the Excel file is loaded from disk, into the xamSpreadsheet control.  Now, you will immediately notice that there is no selection or editing in the control right now.  So, this is really more of a viewer in it’s current state.  Any modifications to the file, such as merging cells, fonts, styles, etc., will need to be done on the Workbook object itself.  Of course this will change.  We are hard at work making sure we deliver the best editing experience for when the control is officially released in the up coming 14.2 release.

Now is the time for you to share your thought son what features it should have, and how they should work.  For example, maybe you want data binding support.  How should this work?  You have a voice; now is the time to use it!  That’s all there is to it.  Download the source code, and start playing around with it .  As always, feel free contact me on my blog, connect with me on Twitter (@brianlagunas), or leave a comment below for any questions or comments you may have.

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:

Infragistics Silverlight 2014 Volume 1 Service Release

• PDF - Infragistics Silverlight 2014 Volume 1 (Build 14.1.20141.2009)
• Excel - Infragistics Silverlight 2014 Volume 1 (Build 14.1.20141.2009)

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:

Infragistics WPF 2014 Volume 1 Service Release

• PDF - Infragistics WPF 2014 Volume 1 (Build 14.1.20141.2027)
• Excel - Infragistics WPF 2014 Volume 1 (Build 14.1.20141.2027)

With every release comes a set of release notes that reflects the state of resolved bugs and new additions from the previous release. You’ll find the notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

Download the Release Notes

Ignite UI 2014 Volume 1

• PDF (Ignite UI 2014 Volume 1, Build 14.1.20141.2031)
• Excel (Ignite UI 2014 Volume 1, Build 14.1.20141.2031)

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

Download the Release Notes

• PDF - Infragistics Silverlight 2014 Volume 1
• Excel - Infragistics Silverlight 2014 Volume 1

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

Download the Release Notes

• PDF - Infragistics WPF 2014 Volume 1
• Excel - Infragistics WPF 2014 Volume 1

Indigo Studio already makes it easy for you to quickly create functional, animated UI prototypes while maintaining the focus on user experience at every step -- all with no coding necessary! Now, Indigo is even better, thanks to screenparts. Learn all about this new feature in our recent webinar.

[youtube] width="420" height="315" src="http://www.youtube.com/embed/ThRvIBcYBGI" [/youtube]

In this video, interaction Design Manager George Abraham walks you through Indigo Studio and all the exciting new things you can do with screenparts, including:

• creating re-usable custom buttons and interactive widgets;
• adding interactions and user flows inside each screenpart;
• sharing your screenparts with your team members; and more.

For more videos like this one, be sure to subscribe to our YouTube channel.

If you have been following the news around our 14.1 release a major focus this cycle was on developer productivity. In the current blog we are going to focus on the new Visual Studio Starter Kit Template Gallery.

The main idea behind the Infragistics template gallery is to provide easy to use project templates to developers.In the gallery you will find project templates mostly based on different on app samples for ASP.NET, WinForms and Ignite UI ASP.NET MVC. These templates are real world applications that can be easily adjusted to your needs. What motivated us to create such templates is that we want you to write less code and easily establish beautiful, functional, user friendly and fully-styled applications.

Among the current template you will find the ASP.NET Energy Dashboard sample,Ignite UI Healthcare PhoneGap app as well as WinForms samples such as Inventory Management, Project Manager and Outlook CRM. Over time we will create and add more templates to address a wide range of application scenarios.

What you need to know

The Infragistics template gallery is a beautifully designed visual studio extension and can be downloaded with the installer from our main page. When you run the platform installer you will find the tools listed at the end of the of the selectable products. Don’t forget to check the Visual Studio Template Gallery. Pay attention that this tool is supported only for Visual Studio 2012 and above.

After you have installed the Infragistics Template Gallery, you can find the tool in the File->New Project dialog of Visual Studio as a Project template under the Infragistics category.

The selection of this Infragistics template will open a wizard which contains all of our available project templates. As we mentioned in the beginning of the article, most of them are based on existing application samples. You simply click on one of the templates in order to download it and start a new project with it.

As I said you can choose a template for your ASP.NET, MVC or WinForms project. No matter which template you choose you should be on the alert that your NuGet package should be a recent version and you should have the Package restore in the Tools->Options->NuGet Package Manager enabled. If the options in the dialog are not checked – check them and restart your Visual Studio, so that the changes will be applied. That way you will have the missing NuGet packages automatically restored during build time.

In the Template Gallery wizard you can see that at the beginning all of the templates are online, but after you have chosen one of them it will be downloaded. You can find all of the downloaded templates listed in the File->New Project dialog of Visual Studio under the Infragistics category. That way when you want to use these templates again they will be more easily accessible. Another place where you can find the installed templates is in the Tools->Extensions and Updates dialog in Visual Studio. We will be publishing the project templates into the official Visual Studio gallery so if a new version of the template come out you will be notified and you can update it from either this dialog or our installer. As the templates can be downloaded separately from the wizard they can as well be updated separately. That means they are not tied to the release cycle and you can get new versions as soon as they are available.

Ignite UI ASP.NET MVC razor templates

To use any of the Ignite UI MVC razor template there are two requirements that you need to fulfill. First you need the Ignite UI product installed. You can download a free trial from our main page :  www.infragistics.com. The second thing is that you should ensure that the Infragistics.Web.Mvc assembly (DLL) reference is updated to the current version. If you want to update the version number, you should remove the assembly reference and re-add it from the Global Assembly Cache (GAC). You should also set the Infragistics.Web.Mvc.dll property Copy Local to true in the project that you’ve created from the template.

Don’t worry if you haven’t done any of these steps and an error occurs when you run the project you will see a helpful guidance  notifying you of the possible issues.

ASP.NET template

The ASP.NET Energy Dashboard is a great example for a real-world application. The thing to watch out for here is whether the version of the the assemblies added in the templates differ from those that you downloaded with your package an error will occur. That can be easily fixed. In the installer platform at the tools section you can see the Version Utility tool. After you have it installed you just have to Upgrade the Infragistics version for your project. Another way to fix this problem is to change the version number manually. Go to the web.config file and find the assemblies  and controls tags and change the version of the Infragistics DLLs there to the correct one.

Summary

Having a ready to use templates saves time and allows you to create stunning application while writing less code.  In the new 14.1 release of Infragistics you can find a template gallery with different easy to use fully-styled application samples for ASP.NET, Ignite UI ASP.NET MVC as well as WinForms. This starter kit  gives you the opportunity to build real-world apps – so just add your content to the template and let the magic happen.

You can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!

Introduction

With every release comes a set of release notes that reflects the state of resolved bugs and new additions from the previous release. You’ll find the notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release Notes: NucliOS 2013 Volume 2 Build 171 and NucliOS 2014 Volume 1 Build 111

By Torrey Betts

Get ready for our free webinar on May 21st!

[youtube] width="640" height="480" src="http://www.youtube.com/embed/q0eWIa_eXig" [/youtube]

There is a lot of data out there, and everyone claims that it holds the key to business growth, large scale innovation, peace, love and prosperity. But how do you go from data to insight? Let Dr. Kevin Richardson show you how in his webinar.

Hurry, space is limited – reserve your spot today and we’ll see you there!