Quantcast
Channel: Infragistics Community
Viewing all 2223 articles
Browse latest View live

Four simple steps to working with Ignite UI for Angular Grid and REST Service.

$
0
0

 This article will help you in adding an Ignite UI for Angular grid in an Angular application. You can scaffold Ignite UI for Angular Grid using Ignite UI CLI also. However, this article will focus on showing you steps to add a grid in the Angular application. You will also learn to bind grid with external REST API. Here I am assuming that you already have an Angular project. If you do not have, you can create using Angular CLI. Once your project is ready, follow the steps as mentioned below:

Step 1: Add Ignite UI for Angular library

Let us start with adding the Ignite UI for Angular library in the project. We can use npm to do this. So run the command shown below to install Ignite UI for Angular

npm install igniteui-angular

After installing Ignite UI for Angular, we need to install hammerjs. To install hammerjs run command as below:

npm install hammerjs

After installing Ignite UI for Angular, let’s make sure that the project references the Ignite UI for Angular styles and the hammerjs library in the angular-cli.json. Modify angular-cli.json as shown below:

angular-cli.json

"prefix""app",
    "styles": [
        "styles.css",
        "../node_modules/igniteui-angular/styles/igniteui-angular.css"    ],
        "scripts": ["../node_modules/hammerjs/hammer.min.js"],

Ignite UI for Angular styles uses the Material Icons. Let us import those in the styles.css as shown below:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

After that import hammerjs in main.ts as shown below:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import 'hammerjs';

Step 2: Import required modules

 

To work with the Ignite UI for Angular grid, you need to import following modules in app.module.ts

import {
    IgxGridModule
} from 'igniteui-angular/main';

Then pass it in imports array as shown in below listing:

imports: [
    BrowserModule,
    FormsModule,
    IgxGridModule.forRoot()
],

Step 3: Create data source

Ignite UI for Angular grid needs a data source. You can have a data source

  1. Local data source
  2. REST API

In a real-time scenario, it will bind to REST API for the data source.  You can use Angular services to consume REST API and create a data source for igxGrid.  Let us assume that we want to bind to a Contact data source.

To work with Contact data source, first add an entity, which will represent Contact.

contactentity.ts

export interface ContactEntity {
    Id: string;
    FirstName: string;
    LastName: string;
    Company: string;
    Address: string;
    City: string;
    County: string;
    State: string;
    Postcode: number;
    Country: string;
    Phone1: string;
    Phone2: string;
    Email: string;
    Web: string;
}

 Create an Angular service to consume REST API as shown in the below listing:

app.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/map';
import { ContactEntity } from './contactentity';
 
@Injectable()
export class AppService {
 
    private contactsapiurl = 'https://adapttableapi.azurewebsites.net/api/contacts';
    constructor(private http: HttpClient) { }
    getContacts(): Observable<ContactEntity[]> {
        return this.http.get<ContactEntity[]>(this.contactsapiurl);
    }
 
} 

Here, I am consuming a hosted API using Angular HTTP service.  Now we can use this service in component class as below:

export class AppComponent implements OnInit {
    title = 'app';
    data: ContactEntity[] = [];
 
    constructor(private service: AppService) {
    }
 
    ngOnInit() {
        this.service.getContacts().subscribe(t => {
            this.data = t;
            console.log(this.data);
        });
    }

Also, do not forget to pass import AppService and ContactEntity in component class as shown in the listing below:

import { AppComponent } from './app.component';
import { AppService } from './app.service';

In AppModule class pass AppService in provide array as shown below:

imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    IgxGridModule.forRoot()
],
    providers: [AppService],
        bootstrap: [AppComponent]

In this step, you have consumed REST API and brought data into the component.

Step 4: Add Ignite UI Grid

We have data in the component class. Next, we can create igxGrid by just adding <igx-grid></igx-grid> on the template.  You can set up all properties of igxGrid declaratively in either template or use the code in the component class. You can set such as such as many properties

  • Data
  • Height
  • Width
  • Auto-generated
  • Pagination
  • Sorting
  • Searching
  • Columns
  • Columns header template
  • Columns template
  • Pagination template

There are many more. However, basic properties you must set to work with igxGrid are:

  1. Data
  2. Height [optional]
  3. Width [optional]
  4. Autogenerated
  5. Columns

 Let us add a grid as shown in the listing below:

<igx-grid # grid1 id="grid1" [data]="data"          [width]="'1400px'"          [height]="'600px'"          [autoGenerate]="false"> </igx-grid >

We have set the autoGenerate property to false; hence, we need to configure columns.  Columns can be added using igx-column element, which has these primary properties

  • Width
  • Field
  • datatype
  • header

Besides above properties, you can have header template, column template, etc. Column field property must be set to JSON object property, which would be displayed in the particular column. We can add columns to the grid as below:

<igx-grid #grid1 id="grid1" [data]="data"           [width]="'1400px'"           [height]="'600px'"           [autoGenerate]="false">     <igx-column width="90px" field="Id" header="Id" dataType="string"></igx-column>     <igx-column width="220px" field="FirstName" header="First Name" dataType="string"></igx-column>     <igx-column width="220px" field="LastName" header="Last Name" dataType="string"></igx-column>     <igx-column width="250px" field="Company" header="Company" dataType="string"></igx-column>     <igx-column width="250px" field="Address" header="Address" dataType="string"></igx-column>     <igx-column width="150px" field="City" header="City" dataType="string"></igx-column>     <igx-column width="150px" field="County" header="County" dataType="string"></igx-column>     <igx-column width="150px" field="State" header="State" dataType="string"></igx-column>     <igx-column width="120px" field="Postcode" header="Postcode" dataType="number"></igx-column>     <igx-column width="150px" field="Country" header="Country" dataType="string"></igx-column>     <igx-column width="120px" field="Phone1" header="Phone1" dataType="string"></igx-column>     <igx-column width="120px" field="Phone2" header="Phone2" dataType="string"></igx-column>     <igx-column width="220px" field="Email" header="Email" dataType="string"></igx-column>     <igx-column width="300px" field="Web" header="Web" dataType="string"></igx-column> </igx-grid>

We have set height, width, autoGenrate properties of the grid along with data property, which is set to data source we created in the component class.  You can very quickly configure the grid for features such as pagination, sorting, filtering, etc. we may cover that in next articles.

Run application

Now when you run the application, you will find grid added to application and bind data coming from external REST API as shown in the image below:

Here you have Ignite UI for Angular Grid running in an application which is a bind to a REST API. In next articles, we will learn to configure features such as paging, sorting, filtering, virtualization, etc. on the grid.  If you like this post, please share it. Also, if you have not checked out Infragistics Ignite UI for Angular Components, be sure to do so! They have 30+ material based Angular components to help you code web apps faster.


UXify 2018 – Shifting Dimensions: From 2D to Virtual Reality, the UX Designer’s Journey

$
0
0

How can designers of traditional 2D applications make the transition to designing virtual reality interfaces? At UXify 2018, Lisa Lokshina and Kristine Malden will provide practical advice based on their own transitions into designing virtual reality projects.   

UXify 2018: The Future of User Experience, our sixth annual, free UX conference, takes place on Friday, April 27 from 11 am – 5:30 pm, with networking from 5:30 - 7:00 pm. Lunch, snacks, and beer and wine during the networking are included.

Check out the UXify 2018 agenda and speaker list, and register for FREE.

Lisa LokshinaKristine Malden

Shifting Dimensions: From 2D to Virtual Reality, the UX Designer’s Journey
By Lisa Lokshina, Principal User Experience Designer & Researcher at L3A Studio and
Kristine Malden, Associate Director of Creative Strategy at Slab Design

What does it take to transition from being a UX designer of 2D apps to one who can take on exciting virtual reality projects? How much of leap do you need to take in your career to be a key player in designing immersive experiences? And what kind of new design skills will UX designers need to learn in order to take on VR projects? 

This presentation will outline our personal journeys from working as UX designers for flat displays to taking on projects in the world of VR. We’ll talk about what UX toolsets we took with us from past projects, and how some of our processes have changed (and how others haven’t at all!). We will review some common pitfalls when designing for VR, how to avoid them, and what you can bring from two-dimensional design (and what you can’t).

Lisa Lokshina & Kristine Malden
Lisa and Kristine have over 25 years of cumulative professional experience designing interactive interfaces in emerging tech for a broad spectrum of clients. In recent years, they’ve turned their knowledge and expertise with UX to the emerging field of Virtual Reality. Both hold a Master’s degree in Interaction Design from New York University’s Interactive Telecommunications Program (ITP). 

Kristine is currently the Associate Director of Creative Strategy at Slab Design, while Lisa is the Principal User Experience Designer & Researcher at L3A Studio.

Register for UXify

What's New for 18.1: Infragistics UItimate

$
0
0

Our semi-annual release of our Infragistics Ultimate 18.1 development suite is upon us, and it is loaded with features that are modernizing user experience and UI tooling. With optimization and performance in mind, we've included updates to our .NET, JavaScript, and HTML5 data grids and chart components, user-friendly functionalities for our Angular data grid, and robust Microsoft Excel-style spreadsheet solutions for .NET and JavaScript.  

Keep reading for the details for this release and links to the What's New blogs for each platform!

Fastest Angular Grid and Angular Charts

With 18.1, you'll benefit from the market-leading performance you've come to expect from Infragistics in both our Angular Data Grid and our Angular Chart.  The grid benefits from both column and row based virtualization, giving you desktop-like scrolling performance for any number of rows or columns in the Grid. In the Angular Chart, we've optimized our canvas-based chart renderer for Angular, giving you multi-million data point renders in millisecond timeframes - all with smooth zooming & panning with the mouse or touch on mobile devices.  Experience this awesome performance yourself in the Angular Grid and Angular Chart samples!

Along with the great performance, you'll also appreciate all of the new features we've added to the grid as well, including Column & Row virtualization, Paging, Column level support for Filtering, Sorting, Summaries, Pinning, Hiding, Resizing, grid level Filtering, Row Selection / Select All, Export to Excel (XLSX, CSV, TSV), and a whole lot more. 

 Check out the What's New blog to learn about all of the new features and capabilities we're shipping in 18.1 for Angular.

Interactive, Real-Time Financial Charting

The new Financial Chart control for WPF, JavaScript and Angular gives developers a complete financial analysis charting tool with single line of code.  A built-in toolbar gives one-click access to Bollinger Bands and Price Channel overlays, over 25 built-in Financial Indicators, over a dozen Trend Line options, multiple Chart Types & Volume Indicators – all preset in a convenient toolbar with built in time-based filtering. 

 

To learn more about the charts, head over to either of our What's New Blogs for Ignite UI and Ultimate UI for WPF. 

Excel and Spreadsheet Solutions for .NET and JavaScript 

With extensive updates to our Excel Library component, now with over 300 supported Excel functions, support for conditional formatting, table sorting & filtering and Worksheet sorting & filtering, you can manipulate your Microsoft Excel data without ever needing Microsoft Excel installed on your desktop or server!  With these improvements, we've added new interaction menus and custom dialogs to the JavaScript Spreadsheet & WPF Spreadsheet controls.  You can now interactively Filter, Sort, Format Cells, add Conditional Formatting and more with built-in menus on the Spreadsheet.

 

Take a look at our What's New for Ultimate UI for Windows Forms,  Ignite UI and Ultimate UI for WPF to read about updates to the Excel Library & Spreadsheet controls.  

There is a lot more to talk about, so please read all of the blogs around this release, and downloadInfragistics Ultimate today!

What's New in 18.1: Ignite UI for JavaScript

$
0
0

Ignite UI for JavaScript and Ignite UI for Angular pack a punch with best-of-breed components designed to be the optimal choice for any Capital Market application for JavaScript and native Angular. Featuring support for OpenFin OS, an increasingly popular alternative to modernize financial desktops and enable instant distribution across multiple device types. These top performing, easy-to-use, data grids and financial charts are built to be the backbone of high-performance, high-volume data applications.

Ignite UI for Angular now boasts the fastest Angular Data Grid & Angular Chart components on the market. In addition, our Angular toolkit has expanded to 50+ Material-based components. Ignite UI subscribers have a commercial license for our JavaScript and Angular components.

Let's get into the details about what's new.

JavaScript and Angular Get Financial Charts 

With the Financial Chart for JavaScript and Angular, igFinancialChart and igxFinancialChartrespectively, users are offered a lightweight and high-performance solution for displaying financial data with web applications. It's boasting an intuitive and easy-to-use API, as the chart function offers multiple ways in which a user can display or visualize financial data. Essentially, it helps you easily bind your data or data collections, and then it will automatically analyze and select data columns for you. It’ll go ahead and use the Date and Time columns for the x-axis, and the y-axis will be dedicated to Open, High, Low, Close, and Volume. If you don’t have y-axis columns specifically dedicated to those titles, it’ll then pick the first five numeric columns. Furthermore, you can choose while chart types to employ for your data, with options like Bar, Candle, Column, and Line.  

 

JQuery Candle Chart 

 

Angular Candle Chart 

JavaScript's Excel Engine Features and Spreadsheet Support 

Moving from the Financial Charts, Ignite UI for JavaScript has had updates to its Excel engine with now over a hundred supported functions for the engine and spreadsheets. One significant feature of the update is the addition of Conditional Formatting, allowing you to apply formatting like colors, icons, and data bars to one or more cells based on the cell value. On top of the Conditional formatting, there's also the new Advanced Dialog filter that makes the filtering of specific data much more manageable.  

 

Conditional Formatting 

 

Example of Date Filters 

Angular's Updated Data Grid and Chart Components 

We're proud to continually provide developers with the best Data Grid components on the market, and our additions with this release are offering a variety of capabilities to improve the user experience. While you can extensively read about the updates for Angular in the blog post, "What's New in 18.1: Ignite UI for Angular", we do want to highlight a major component that was included in this release: The Category Chart. This component simplifies the complexities of the data visualization domain into an uncomplicated API. You can effortlessly bind a collection of data, or even a collection of collections, and let Category Chart do the rest. It’ll analyze your data and then automatically select the best series for the data’s representation. You can see the sample of the Category Chart and be mindful that the Grid updates are also here to help. Some notable components of the Data Grid are Column Pinning, Column Resizing, and Export to Excel, and you can glance through the list of components to learn even more. 

 

Our goal is to help you boost user experience and your productivity when it comes to web application development.  Want to check out the new features for yourself? You can jump-start trying out our Ignite UI suite with a free trial or update your current subscription. Lastly, check out the @Infragistics Twitter page and if you have a request for a future product update, submit it at the Product Ideas page.

What's New in 18.1: Ignite UI for Angular

$
0
0

With today's release, Ignite UI for Angular includes 50-plus best-of-breed Material based components – now with the fastest data grid & charting available.  Optimized for performance and detail level control, all Angular components can handle large datasets smoothly with Infragistics Virtualization directive and are easily branded or themed through an intuitive API. 

Ignite UI’s Angular Data Grid has added several features including paging, header, cell and footer templates, editing cells directly or through a dialog box, column pinning, hiding, movable columns, column summarization, advanced sorting and filtering, and exporting to Excel, CSV, and TSV files.

New Angular Chart components include the lightweight, high-performance Financial Chart, and Category Chart. Display data in one of many chart types, including; line, area, column point, spline, step, waterfall and more.

Furthermore, our Ignite UI for Angular CLI tool is providing an open-source, no-code solution for developers working within the command line. It allows for easy, industry standard scaffolding of necessary application files, importing of often used modules for quick building, and worry-free installation of necessary project dependencies.

Let’s look at the host of updates to Ignite UI for Angular.  If you'd like to just jump ahead and start trying it out for yourself, download our Ignite UI for Angular trial.

Grids and Lists 

Now, let’s focus on some of our flagship updates for this release: the new capabilities with our Grid components. You’ll be pleased to see that we’ve incorporated a slew of features with our igxGrid component, and you can read about all of them on the components page 

Column Pinning 

With column pinning, we’ve now allowed users to pin a single column or multiple columns to the left-hand side of the grid. With the columns pinned in this fashion, a user will be able to see those specific columns all the time while horizontally scrolling, and it serves as a great way to keep track of the data that you’re viewing.  

 

Column Resizing 

On top of pinning, we’ve added deferred column resizing with igxColumnResizing. This neat feature incorporates a delayed update, meaning that it shows the user a temporary resize indicator while the drag operation is in effect. The new column size is then only put in place once the drag operation ends.  

 

 

Export to Excel/CSV/TSV 

Moving forward, users can export their grid data into the format of their choosing: Excel, CSV, and TSV. So, if you’re looking to edit offline or you need to do some offline presenting, the export function for igxGrid is now your go-to operation. 

 

Summaries 

Continuing with featured components, there has now been a summaries section added to the grid. Summaries are an excellent way to quickly see column data, as they display default information about the column in a separate container. Given the data type in the column, the summaries in the container will change, and it’s helpful to note that each summary is on a per-column level.  

 

Row Selection 

The last highlighted addition to the grid rests with the row selection feature. The grid now supports the selection of one or multiple rows through a checkbox that precedes all the other columns in the row. This makes it easy for a user to select and to deselect specific rows.  

 

Editors 

So, now leaping beyond our grid attributes, we’ll move into our new grid editors. In Ignite UI for Angular, our grid component provides the ability for users to edit the data it displays through inline editors in the grid cells and through editing dialogs that will spawn. Accordingly, we have two editors to present with this 18.1 update, and you can view the whole list of editors. 

Mask Directive 

The igxMask directive is providing the developer the means to control user input and to format the visible value based on configurable mask rules. It’s touted as very easy to use and to configure, providing different input options. The example below demonstrates a simple personal data form. 

 

Input Groups 

Speaking about input groups, it’s an excellent time to discuss our refactoring of igxInputGroup. We went ahead and decided to ease the user experience of inputting data, so we added new input groups to our controls. This is allowing developers to craft easy-to-use, good-looking forms and, to boot, ones that handle validation and errors really well. In the examples, you can see both “Line Style Input” and “Border Style Input”: 

 

 Theming 

We had one addition to our Styles & Themes category, and that is the recent theming mechanism. Mainly, we developed a new mechanism through SASS that enables another intuitive API for changing the theming of your various components. Our team designed it so that users only need to account for a few lines of code to style according to their needs. Handily, you can restyle one component, multiple components, or change the styling of the entire suite.  

 

Toggle 

In our “Interactions” section, we brought to you the much needed igxToggle directive. On a basic level, this allows users interactivity in opening, animating, and closing a toggle container. The rest of igxToggle allows for the implementation of toggle-based components and views, like a drop-down, while igxToggleAction controls all of the other “toggleable” components.  

 Tabs 

Within our Layouts section, we’ve implemented the igxTab component to organize or to switch between similar data sets. The tabs are placed at the top and allow for scrolling when there are multiple tab items. 

 

Time Picker 

And, last but not least, is our Scheduling feature, the Time Picker component. With igxTimePicker, the user can select a time from a dialog with spinners. A seemingly small addition, but very useful! 

 

Financial Chart 

Now, let’s focus on another of our flagship tools for this release: the new igxFinancialChart component. This offers developers the ability to craft lightweight, high-performance, and easily configured charts to display financial data. It boasts a simple and intuitive API for working with and binding your data or data collections. On top of that, the chart offers multiple ways in which a user can display or visualize the financial data, providing context and clarity to relevant information. If you needed any more urging to try out this control, it also intuitively and automatically analyzes and selects data columns for the user. It’ll go ahead and use the Date and Time columns for the x-axis, and the y-axis will be dedicated to Open, High, Low, Close, and Volume. If you don’t have y-axis columns specifically devoted to those titles, it’ll also pick the first five numeric columns. You can see a detailed list of the component's features on  

Below, you can see an example of an automated chart: 

By including this support for OpenFin and extending our controls, we’re broadening our scope to help developers who are extensively working with primary and secondary capital market applications.  

Category Chart 

With the excitement from the financial chart control, it seems natural to move into our new component for visualizing category data. Essentially, igxCategoryChart simplifies the complexities of the data visualization domain into an uncomplicated API. You can effortlessly bind a collection of data, or even a collection of collections, and let Category Chart do the rest. It’ll analyze your data and then automatically select the best series for the data’s representation.  

 

You’ll have a variety of chart types to choose from Spline, Point, Waterfall, Line, and many others. 

Virtualization 

Now that we’ve seen our significant charting and Data Grid additions, we should pay mind to our other significant change: the virtualization directive. We’ve added the igxForOf directive to aid in the rendering of large-scale data sets in your applications without loss to performance. This will allow a user to smoothly scroll through big data sets and keep the application running at optimal capacity.  

On top of this, the igxForOf directive can be incorporated into almost any component that needs to render the vast amounts of data, giving you considerable options when working behind the scenes with your application. 

Overall, we see some super exciting features and components added to Ignite UI for Angular in this release. It’s bringing OpenFin support and functionality to address growing development trends in the financial markets space, and it’s delivering lightweight grids and charts for your data display needs. As we continue to add features and new components in an on-going basis, please make sure to check out the Ignite for UI Angular page, where you can create or use your existing Infragistics account, or pop open the command line, and get to try out these powerful features. Beyond that, you should follow us on Twitter via @Infragistics for product news and stay up-to-date with our Community Forums.

Lastly, if you have future feature requests, please submit them via our Product Ideas website.

Update: 2018 Roadmap for Ignite UI for Angular

$
0
0

Starting with the April 2018 release of Ignite UI for Angular, we are shipping broader capabilities in the toolset, but more impactfully for developers we are adding key features to our Angular Data Grid, a brand new native Angular Charting component, and new additions to the Ignite UI CLI.

  • The Angular Data Grid now ships with Column & Row virtualization, Paging, Column level support for Filtering, Sorting, Summaries, Pinning, Hiding, Resizing, grid-level Filtering, Row Selection / Select All, and Export to Excel (XLSX, CSV, TSV).
  • The Angular Chart ships in 2 flavors: Business Charting (Line, Column, Area, Spline, Area, Point, Waterfall, Step Area, Step Line, Spline, Spline Area) and Financial Charting (includes Bollinger Bands and Price Channel overlays, over 25 built-in Financial Indicators, 13 Trend Lines, 4 Chart Types & 3 Volume Indicators) all preset in a convenient toolbar with built-in time based filtering.
  • The Ignite UI CLI supports all grid component features, chart features and the ability to add your own custom templates that can be used across your teams to amp up productivity.

To review all of the new features in the April 2018 release, check out the What's New in 18.1: Ignite UI for Angular blog.

In early June 2018, we are shipping a major release that ties the Design to Development story together in a big way.  When we first launched our native Angular product over a year ago, we included a Sketch UI Kit which included pixel-perfect symbols that mapped to each widget in the Ignite UI for Angular toolbox.  In June, we are taking this a step further, combing Sketch, Indigo Designed (our cloud-based experience for prototyping, collaboration on designs & usability studies) and our Angular controls in a complete solution for visual designers, UX designers & developers.  Stay tuned as we show more of this story in the May timeframe in preparation for a June release.

Between May and July 2018, we’ll be pushing updates which continue to give you more options when using the Angular Grid & Angular Chart

  • Grid Multi-Column Headers / Column Groups
  • Grid Column Grouping (Outlook Group By interactive grouping)
  • Grid Advanced Filtering / Cross-Field Filtering
  • Dropdown / Combo Box
  • Pie Chart
  • Doughnut Chart
  • Radial Gauges
  • Linear Gauges
  • New Themes / Theme Samples
  • New and Exciting Visual Studio Code plug-ins that help to build Angular apps faster

In our Q4 October / November release, we are continuing to focus on developer productivity, not only in terms of tooling but in major controls that you need to drive enterprise apps.

  • Angular Excel Spreadsheet (modeled after our JavaScript Spreadsheet)
  • Angular Excel Library (modeled after our JavaScript Excel Library)
  • TreeView
  • Hierarchical Data Grid
  • Grid Column Moving
  • Calendar Views (Day, Week, Agenda)
  • Scientific Charts
  • Polar Charts
  • Scatter Charts (including Contour, Polygon, Polyline, Area, Spline High Density)
  • Stacked Charts

As with any roadmap, things may shift and toggle a bit, but we are committed to continuing to deliver high value on a regular basis for the Angular developer & designer throughout 2018.  If you are looking for something and don’t see it here, or have a different idea, please add/suggest anything you’d like on our Product Ideas site.

Click here for directions on how to install Ignite UI for Angular, then sign up for a free 30-day trial that includes set-up along with enterprise-ready support. Call one of our five worldwide offices to set up a product demo. We’re excited to hear what you think.

What's New in 18.1: Ultimate UI for Windows Forms

$
0
0

In our 18.1 Ultimate UI for Windows Forms release, we aimed to provide the most complete Microsoft Excel & Spreadsheet solution for .NET application development.

Today, Infragistics Excel engine and Spreadsheet control features over 100 supported functions.  Additionally, we have delivered updated to our Windows Forms Data Grid and Windows Forms Data Chart.  Let's look at what's new.

Excel Engine and Spreadsheet Features 

We'll start with the Infragistics Excel Engine which is capable of creating full Microsoft Excel Workbooks, so while using this object model, you can load, modify, and save Excel workbooks. This has been integral to our Ultimate UI for Windows Forms for some time, and it's now received a multitude of updates to provide user flexibility and ease. We'll begin with a few of the significant featured updates and then move into a brief overview of other supported spreadsheet functions.  

Conditional Formatting 

As you might have guessed, we can now leverage conditional formatting into the spreadsheet with this feature. The spreadsheet will now support the rendering of all conditional formatting options available in Excel. As it turns out, Excel has several predefined styles that you can use to conditionally format your data: Data Bars, Color Scales, and Icon Sets. I've respectively shown them below for reference and included a sample of what your Windows Forms spreadsheet might look like with conditional formatting.  

 

This now opens a variety of doors for your data. If you're looking to display a simple icon, compare values, create alternating bands, or find duplicates, our Excel engine will help you out.  

 

Worksheet Sorting and Filtering 

Considering our discussion of formatting, it's fitting to move into the sorting and filtering options that have been included. Typical of any sorting or filtering function, you're looking to find information quickly and concisely within your data. While we had these functions working within a Worksheet Table, we've gone ahead and made it so that you can now sort and filter your information outside of a table. Essentially, you can define a single area, within the Worksheet, but outside of the table, and you can apply these operations. In addition to this, the sorting and filtering classes are now public. These were previously internal because the only way to specify an icon is via a conditional formatting icon set. Luckily, as you just noted above, the advent of conditional formatting has now made this possible.  

 

List Validation 

Often when working with repetitive and selective information, you'll find yourself turning to list data validation to help with your work. This type of data validation will either contain an explicit list of values, or it'll point to a range of cells that contain the values. So, when you have your list validation set up for a particular column, for instance, you will see a cell drop-down option that then lets you select the appropriate data from your specified list. So, why the overview? Because while we had list data validation in place, users had to know of the list's specifiers to type in the relevant data, since there wasn't a cell drop-down option. In this update, we've added the cell drop-down option for ease and functionality.  

 

Cell Drop-Down 

To further highlight added cell drop-down functions, there's a shortcut that's frequently employed when users are inputting the same data from a list. This differs from list data validation, as you're not directly correlating a set of cells to a list of data, but rather calling up a list that implicitly uses the data that surrounds the cell in which you're working. With Windows Forms in mind, we decided to change this function slightly, since if we made this possible in Edit Mode for the Worksheet, it would have generated complications with focus handling.  

 

Table Improvements 

There are a multitude of table improvements, so I'll underscore a few of them, and you can glance at the rest when you get a chance. The major ones to come with this update are Copy and Paste, Editing, Tab Navigation, Total Raw Formulas, and ContextMenu 

With Copy and Paste, you can now select an entire table, copy it to the Clipboard, and paste elsewhere to have a new copy of that selected table created. Also, when pasting in a Worksheet Table, the table will be automatically expanded to encompass the area of the paste function.  

As for Editing, when you find yourself typing or editing immediately adjacent to the bottom or right edge of a Worksheet Table, the Table will be expanded. 

Tab Navigation will navigate within the table, wrapping to either the next or previous row. Like Excel, the table will also be automatically expanded when tabbing from the last visible cell of the table. 

 With Total Raw Formulas, we slightly differ from Excel with our drop-down function, as Excel spawns another dialog for formulas. When you have a total row or column highlight in Windows Forms, you can select the drop-down button to pick a common formula for the table.  

For ContextMenu, some additional items were added, such as menu items for inserting and adding rows/ columns to a table, selecting rows/ columns of a table, toggling the total row, and converting a table to a range.  

 

100+ Supported Functions 

Beyond everything that we've spoken about so far, there are a number of additional popular functions supported, including SUM, CONCATENATE, and COUNTA, and a host of others through which you can easily scroll.

Grid Events 

Column AutoSizing with UltraGrid 

Moving from the spreadsheet features, let's discuss the two new events that were added to the UltraGrid: BeforeAutoSizeColumn and AfterAutoSizeColumn. The purpose of these events is to allow developers to modify or to override the AutoSize width of a column. We're pointing this out because it's quite useful if you're using CreationFilter or DrawFilter in a way that affects the required width of a column. CreationFilter, for instance, only affects the rendering layer, so the grid can't adjust the auto-size width. Overall, this is now a great way to add extra pixels to the width of a column, especially if you're looking to accommodate an extra element.  

Data Chart Controls 

Scatter Series 

For our last major update, we added four new types of scatter series to the UltraDataChart control, so let's take a brief glimpse at each of them. Please note that I've linked each chart title to its page that holds more detailed information, and there's a helpful graphic below the descriptions.  

Scatter Area Series: This data chart draws a colored surface based on a triangulation of X and Y data with a numeric value assigned to each point. This series is useful for rendering heat maps, magnetic field strength, or Wi-Fi strength in an office.  

Scatter Contour Series: This chart draws colored contour lines based on a triangulation of X and Y data with a numeric value assigned to each point. This series is useful for rendering contour maps, changes in magnetic field strength or rendering an overlay on top of ScatterAreaSeries  

Scatter Polygon Series: This one is a visual element that displays data using polygons. This type of series can render any shape that you'd like. All you need to do is bind a List of List of Point objects or load a shapefile with polygons using the ShapefileConverter 

Scatter Polyline Series: And for the last one, it displays data using polylines. This scatter series is often used where rendering disconnected lines are required such as a network graph or multiple connections between scatter data points. This series has the same data requirements as ScatterPolygonSeries does, and it also can render data from shapefiles.  

 

In closing, we’ve walked through some impressive enhancements to our Ultimate UI for Windows Forms in this 18.1 release. We've added the most-wanted spreadsheet features and updates to its grid events and data chart controls. In continuance of your work with Ultimate UI for Windows Forms, please make sure to head on over to the product page to view all the updates or try your hand at the free trial. If you already have Ultimate UI for Windows Forms, make sure to update to the latest version. Furthermore, if you’re looking to connect and stay with us on updates, follow us on Twitter via @Infragistics or check out the Community Forums 

What’s New in 18.1: Ultimate UI for WPF

$
0
0

Shhh…. do you hear that?  That’s the sound of our newest Infragistics Ultimate for WPF 18.1 being released into the wild.  Like a stampede of elephants crushing everything in sight, the Infragistics Ultimate UI for WPF 18.1 release is packed with new controls and features that will give your apps the edge you need to crush your competition.  By themselves, these new controls and features are beautiful, majestic, and admired by children and adults alike.  Together, they are an unstoppable force that will instill fear into even the most formidable adversary.

Now, let’s tame this herd of majestic beasts and learn about all the great new controls and features shipping in Infragistics Ultimate for WPF 18.1.

Financial Chart

First up is our brand new xamFinancialChart.  This bad boy is a lightweight, high-performance chart that is used to display financial data using an extremely simple and intuitive API. All you need to do is bind your data (a collection or a collection of collections), and the chart takes care of everything else.

As you can see, the xamFinancialChart has just about everything you need to visualize your financial data.  A toolbar is located above the top of the chart is used for displaying configuration options such as your choice of indicators and overlays, the date ranges, chart type, volume, and type of trendlines to use. Located on the bottom of the chart is an optional navigation view that acts as a zoom bar that allows your end-users to zoom in or out of their desired ranges.

Obviously, this is the financial industry’s dream chart.

Excel Library / XamSpreadsheet

Next up is probably the most impressive amount of work we have packed into a single component in about five years.  Well technically, there are two components being improved here. First is the Excel Library and the other the xamSpreadsheet control.  Obviously, we can’t add a feature to the xamSpreadsheet without the feature first being added to the Excel Library.  So keep in mind, every feature you see here is available in both the Excel Library AND the xamSpreadsheet.

Conditional Formatting

Conditional formatting allows you to automatically apply formatting—such as colors, icons, and data bars—to one or more cells based on the cell value. To do this, you'll need to create a conditional formatting rule. For example, a conditional formatting rule might be if the value is less than $2000, color the cell red. By applying this rule, you would be able to quickly see which cells contain values less than $2000.  Pretty basic stuff right?  Well, the best part is that the xamSpreadsheet supports rendering all conditional formatting features available in Microsoft Excel.   Microsoft Excel has several predefined styles—or presets—you can use to quickly apply conditional formatting to your data. They are grouped into three categories:

Data Bars are horizontal bars added to each cell, much like a bar graph.

Color Scales change the color of each cell based on its value. Each color scale uses a two- or three-color gradient. For example, in the Green-Yellow-Red color scale, the highest values are green, the average values are yellow, and the lowest values are red.

Icon Sets add a specific icon to each cell based on its value.

Format Cells Dialog

One of my favorite new features added to the xamSpreadsheet is the new Format Cell Dialog.  This makes it extremely easy to change how your data is displayed in a cell. For example, you can specify the number of digits to the right of a decimal point, or you can add a pattern and border to the cell. To show this dialog, just right-click the cell and select Format Cells from the context menu.  Let’s take a look at what options are available in the new Format Cell Dialog.

Number Tab

By default, all worksheet cells are formatted with the General number format. With the General format, anything you type into the cell is usually left as-is. For example, if you type 36526 into a cell and then press ENTER, the cell contents are displayed as 36526. This is because the cell remains in the General number format. However, if you first format the cell as a Currency, then the number 36526 will be displayed as $36,526.00.

Alignment Tab

You can position text and numbers, change the orientation and specify text control in cells by using the Alignment tab

Font Tab

The term font refers to a typeface (for example, Arial), along with its attributes (font style, point size, underlining, color, and effects). Use the Font tab in the Format Cells dialog box to control these settings. You can see a preview of your settings by reviewing the Preview section of the dialog box.

Border Tab

In Excel, you can put a border around a single cell or a range of cells. You can also have a line drawn from the upper-left corner of the cell to the lower-right corner, or from the lower-left corner of the cell to the upper-right corner.

You can customize these cells' borders from their default settings by changing the line style, line thickness or line color.

Fill Tab

Use the Fill tab in the Format Cells dialog box to set the background color of the selected cells. You can also use the Pattern list to apply two-color patterns or shading for the background of the cell.

Protection Tab

The Protection tab offers you one option for protecting your worksheet data and formulas.  However, this option does not takes effect unless you also protect your worksheet.

Worksheet Filtering

While we always had filtering available in the Excel Library, it only applied to filtering within a worksheet table.  We have extended the filtering behavior to allow you to define a single area within the worksheet outside of a table that you can filter.  As you would expect, you can filter on one or more columns of data. With filtering, you can control not only what you want to see, but what you want to exclude. You can filter based on choices you make from a list, or you can create specific filters to focus on precisely the data that you want to see.  You can filter by a numeric value, text values, or filter by color for cells that have color formatting applied to their background or text.

Not only that, but we provide some built-in filter options in our new and improved context menu:

Text Filters

Number Filters

Date Filters

Custom Filter Dialog

Worksheet Sorting

Besides adding excellent filtering support, we also improved our sorting support.  The new sort menu item will just set the sort of the associated column based on the value/state of the active cell for which the menu was shown. So choosing Sort A to Z will create an ascending value sort for that column.

AutoFilter Support

Even with all those tremendous built-in sorting and filtering features accessible from a simple context menu, we also have AutoFilter support in a worksheet table.  This means that now the headers of a worksheet table, and the header cells of the worksheet level filtering region, will display a drop-down button that displays the filter-related menu.  The buttons show the sort and filter state and the tooltip displays a friendly description of the filter for that column. The menu displays various options for sorting and filtering. The filter options displayed are dependent on the data types in the column as they are in excel. So you’ll see one of the number filters, text filters, or date filters available depending on the data in the table column.

Table Improvements

Tables are ubiquitous when using Excel.  Once you start using the 18.1 version of our xamSpreadsheet, you will see that we really beefed up our table-based features to make your end-users even more productive when working with tables inside the xamSpreadsheet control.

Copy/Paste

Tables will now be copied when the source selection encompasses the entire table. So select an entire table (e.g., click in a cell, press ctrl+a two times), copy it to the clipboard and then paste elsewhere and a new copy of that table is created.  Pasting within a worksheet table will automatically expand the table to encompass the area of the paste. 

Editing

Typing/editing immediately adjacent to the bottom/right edge of a worksheet table will expand the table (in a separate undoable operation similar to what Excel does).

Tab Navigation

Tab Navigation within a table will navigate within the table wrapping to the next/previous row. Similar to Excel the table will also be automatically expanded when tabbing from the last visible cell of the table.

Total Row Formulas

This is another one of my favorite new table features. In Excel when a cell in the total row of a table is active, a drop-down button is displayed that lets you choose a common formula for a table. It can be shown by clicking the drop-down button or pressing Alt+Down when the cell is active.

Context Menu Improvements

To really make you productive, additional context menu items were added to allow you to manipulate the table. This includes menu items for inserting and adding rows and columns to the table, selecting the table row/column, toggling the total row, converting the table to a range, etc.  The table cell context menu is similar to the cell context menu except it is displayed when the active cell is part of a  worksheet table. That menu also has many new commands that relate to affecting the table.

List Validation

In Excel, you can define a particular type of data validation called a list data validation that either contains an explicit list of values or points to a range of cells that includes the values. There is an option on that validation for whether to show a cell drop-down. The data validation class has been in our excel engine for a long time, and the spreadsheet has honored using the validation during editing for a while now too, but we never showed a list, so the end users had to know the list of valid values. Now we support showing a drop-down button that will display a drop-down list of the values. It can be shown by clicking the drop-down button or pressing Alt+Down when the cell is active.

Cell Dropdown

We have also added the ability to show a dropdown list in a cell populated with data from the values immediately above and below the active cell. One way to show this cell drop-down is via the context menu for a cell using the “Pick From Drop-down List…” item, and the other is by pressing Alt+Down.  You’re not explicitly defining the contents of the list as you do with a list data validation – it’s implicitly populated based on the cells above/below in the same manner as Excel.  As with Excel it ignores numerical values, stops at blanks and table boundaries, etc.

 

I know that’s a ton of excellent Excel and xamSpreadsheet features to soak up, but we’re not done yet.  We still have to cover the rest of the features we are shipping in Infragistics Ultimate UI for WPF 18.1.

XamDataGrid

If you’ve been a customer of Infragistics for more than a day, you know that the xamDataGrid is our flagship grid for WPF.  So it should be no surprise that we continue to add significant new features to it in every release.  Check out the latest features to join the xamDataGrid family.

Cell Merging

You may have seen my last post titled “XamDataGrid vs. XamGrid: Which WPF Grid Should I Choose?” in which I told you to use the xamDataGrid, and stop using the xamGrid. In this post, I acknowledged that the xamDataGrid is missing three key features; cell merging, conditional formatting, and Paging.  Well, I am happy to announce that we are one feature closer to closing the feature parity gap between the xamGrid and the xamDataGrid with the addition of cell merging.

Cell merging is a common feature in Microsoft Excel that allows you to deliver data clarity and avoid duplication by merging neighboring data cells across different rows whenever they display matching values.  While Excel made this feature famous, it is now a very common request in the context of showing data in a data grid.  With the release of Infragistics Ultimate UI for WPF, the xamDataGrid has full support for cell merging.

Enabling cell merging is as simple as setting the FieldSettings.MergedCellMode property.  This property will control how and when cell merging is enabled.  If the MergedCellMode property is set to “Always,” any set of cells in a column that have matching values will be merged regardless of their position in the column.  When set to “OnlyWhenSorted,” cells will only be merged when a column has been sorted, and all cells with the same value are in a contiguous order due to the sort operation.  Of course, you can always turn off cell merging by setting the MergedCellMode property to “Never,” and this is, in fact, the default value.

When you enable cell merging, by default, the cells are merged if the adjacent sibling data records display text is the same (the DisplayText value).  You can change this by setting the FieldSettings.MergedCellEvaluationCriteria property.  This property allows you to change the logic that is used to merge cells based on the raw value of the cells, the converted values of the cells, or even the result of the value being converted based on the EditAsType value.

Image Field

Before Ultimate UI for WPF 18.1, if you wanted to use an image in the xamDataGrid, you would have to create a TemplateField and handle all the logic for rendering your image to fit your specific application needs.  While this works, it required a lot of code that had to be manually written to handle every image-loading scenario such as loading from an ImageSource, a Uri, a string, a local resource, or even a byte array.  Honestly, it was a pain in the butt! 

With the release of Ultimate UI for WPF 18.1, you can now use the new ImageField to render your images by just using a property in the underlying bound object and remove all that custom code from your applications.  It does not matter what the source of the image is; the ImageField can handle it.

In the following code snippet, the ImageField.Name is set to a property in the underlying model that represents how the image is loaded.

<igDP:ImageField Name="ImageSource" />                         <igDP:ImageField Name="ImageUri" />                         <igDP:ImageField Name="ImageUriString" /> <igDP:ImageField Name="ImageRelativeUri" BaseUri="https://static.infragistics.com/marketing/Website/home/"/> <igDP:ImageField Name="ImageByteArray" /> 

With the addition of the ImageField, we made using images in the xamaDataGrid stupid simple!

XamDataGrid Control Configurator

As you know, the xamDataGrid is a feature-rich, high performing data grid that meets the needs of demanding enterprise line-of-business applications.  For new users or even seasoned veterans, the API and vast feature set can be overwhelming.  With the xamDataGrid control configurator, we make it dead simple to bind your data, add your fields and field layouts, and turn the most essential features on and off with the click of a button.  When you're done adding the features you want, you simply hit the "Apply & Close" button and all the code will be generated for you.

Your next question is probably, "How do I get it?"

If you have already installed the Infragistics Control Configurators, then you don't have to do anything.  The Visual Studio extension will be updated automatically via the Visual Studio Marketplace.  If you haven't installed the control configurators yet, you can download and install them directly from within Visual Studio or by visiting the Visual Studio marketplace.

XamRichTextEditor New Properties

Not every control needs a large number of massive features to add value, and the newest xamRichTextEditor features prove this.

AcceptsTab

The AcceptsTab property will control the behavior of the xamRichTextEditor when the Tab key is pressed on the keyboard. By default, if you are within the xamRichTextEditor and press the Tab key, the text will be indented for each press of the Tab key.  If you set the AcceptsTab property to False, the text will no longer be indented, but rather the next control with a higher TabIndex will receive focus.

AcceptsReturn

The AcceptsReturn property controls what effect the Enter key will have on the content of the xamRichTextEditor when pressed.  By default, if you are within the xamRichTextEditor and press the Enter key, a new line is entered which moves the cursor to a new position, and you can continue typing content into the xamRichTextEditor.  If the AcceptsEnter property is set to false, if you press the Enter key, no new line will be created, and the cursor will not change.  It does nothing and will have no effect on the content of the xamRichTextEditor.

XamRibbon Improvements

The xamRibbon MenuTool has received a small, but extremely useful, feature that allows you to control whether or not the menu will close when a menu tool is clicked.  Imagine you have a MenuTool with a collection of CheckboxTools that represent a multi-select scenario such as turning on supported clipboard operations as represented by the following code snippet.

<igRibbon:MenuTool Caption="Clipboard Operations" > <igRibbon:CheckBoxTool Content="Cut" /> <igRibbon:CheckBoxTool Content="Copy" /> <igRibbon:CheckBoxTool Content="Paste" /> <igRibbon:CheckBoxTool Content="ClearContents" /> </igRibbon:MenuTool> 

The expected experience is when the MenuTool is opened, and an option is selected, the MenuTool should stay open as you choose more options.  However, with this code snippet, once you check a CheckBoxTool, the MenuTool will close, and you will have to reopen the MenuTool to make another selection, and then continue this process until all desired options have been checked/unchecked.

With the new MenuToolBase.StaysOpenOnClick attached property; you now have full control over when to close the MenuTool when an option is selected.  Simply add this attached property to the tool that will keep the MenuTool open when clicked. We can modify the original code snippet with the new MenuToolBase.StaysOpenOnClick attached property to achieve our desired results.

<igRibbon:MenuTool Caption="Clipboard Operations"> <igRibbon:CheckBoxTool Content="Cut" igRibbon:MenuToolBase.StaysOpenOnClick="True"/> <igRibbon:CheckBoxTool Content="Copy" igRibbon:MenuToolBase.StaysOpenOnClick="True"/> <igRibbon:CheckBoxTool Content="Paste" igRibbon:MenuToolBase.StaysOpenOnClick="True"/> <igRibbon:CheckBoxTool Content="ClearContents" igRibbon:MenuToolBase.StaysOpenOnClick="True"/> </igRibbon:MenuTool> 

Now, no matter how many times these CheckBoxTools are checked/unchecked, the MenuTool will not close until you click on another element in your app.  You can also mix-and-match the attached property in the same MenuTool.  Only the tools that have the attached property will not close the MenuTool, any tool without the attached property will close it.

Ahhhhh... now that's a much better experience!

WPF NuGet Package Improvements

We have historically shipped WPF NuGet packages with our Infragistics Platform Installer.  The installer would merely place a zip folder on your C drive that you could unzip and put in a folder of your choice that you could then use to create a custom NuGet package source in Visual Studio.

While this worked, the experience could be better.  So we made it better!  With the release of Infragistics Ultimate 18.1, we now place the NuGet packages in a local folder, copy all the WPF NuGet packages into it, and create the NuGet Package Source in Visual Studio for you automatically.  You don’t have to lift a finger.  It’s all done for you.  Better yet, we also placed our Infragistics Ultimate UI for WPF 18.1 NuGet Packages on our public NuGet feed that you can use instead of your local feed.  This is useful for getting updated NuGet packages more quickly.

Let’s Wrap this Baby Up!

As I always like to point out, if you have ideas about new features we should bring to our controls, important issues we need to fix, or even brand new controls you’d like us to introduce, please let us know by posting them on our Product Ideas website.  Follow and engage with us on Twitter via @infragistics. You can also follow and contact me directly on Twitter at @brianlagunas.  Also, make sure to connect with our various teams via our Community Forums where you can interact with Infragistics engineers and other customers.  

If you are not using our WPF controls yet, remember that a free evaluation download is only a click away.

Lastly, when you do build something cool with our controls, please make sure to let me know.


Infragistics Ultimate UI for WPF Release Notes - April: 18.1 Volume Release

$
0
0

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:

Ultimate UI for WPF 2018 Volume 1 Volume Release

PDF - NetAdvantage for WPF 2018 Volume 1
Excel - NetAdvantage for WPF 2018 Volume 1

WPF UI Controls

Infragistics Ultimate UI for Windows Forms Release Notes - April: 18.1 Volume Release

$
0
0

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:

Ultimate UI for Windows Forms 2018 Volume 1 Volume Release

PDF - Infragistics for Windows Forms 2018 Volume 1
Excel - Infragistics for Windows Forms 2018 Volume 1

Windows Forms UI Controls

UXify 2018 – If ‘Everyone is a Designer’ Then Why Am I Here?

$
0
0

Infragistics’ Senior UX Designer, Darian O’Reilly, will kick off this year’s UXify conference with her presentation, “If Everyone is a Designer, Then Why Am I Here? Including Clients in the Design Process without Ruining the Design.” 

UXify 2018: The Future of User Experience, our sixth annual, free UX conference, takes place on Friday, April 27 from 11 am – 5:30 pm, with networking from 5:30 - 7:00 pm. Lunch, snacks, and beer and wine during the networking are included.

Check out the UXify 2018 agenda and speaker list, and register for FREE

Darian O'Reilly

If Everyone is a Designer, Then Why Am I Here? Including Clients in the Design Process without Ruining the Design.

By Darian O'Reilly, Senior UX Designer at Infragistics

Whether you are a freelance consultant, work at an agency, or are in-house, you have clients. If you have ever designed something for anyone but yourself, you have experienced the push and pull of creative control that exists in most design projects.

Finding the delicate balance between fostering productive client input and ending up with too many cooks in the design kitchen is a challenge UX designers regularly face. It is impossible to create a useful and elegant product solution without adequate information from our clients, but it is equally difficult to do so while having personal opinions thrust upon you about which shade of blue to use for the submit button and where to put it. Short of jumping on top of the conference table and telling your clients what you REALLY think, how can you navigate this project minefield riddled with often misguided artistic opinions?

This session will walk attendees through four important elements of the design process that when utilized properly, will create structure, provide predictability, and establish boundaries for clients while still encouraging them to make valuable project contributions.

Darian O’Reilly
Darian is a Senior UX Designer at Infragistics and has been creating innovative user experiences for clients in technology, healthcare, financial, consumer and non-profit markets for over 15 years. With a degree in Sociology from Columbia University and a passion for visual design, she offers a unique perspective, applying an artistic eye to the wants and needs of the end user to create intuitive and elegant user interface solutions. She lives by the New Jersey Shore with her husband, teenage children, and three beagles.

Register for UXify

See Darian's previous posts on this topic: If Everyone's a Designer, Then Why Am I Here? Part 1 - Setting Expectations and Part 2 - Getting it Done

Modernizing a Desktop Application? Don’t Forget About the User Experience.

$
0
0

So, you want to modernize an old desktop application by redesigning it as a modern web-based application? There is more to consider than merely the technical platform and the look and feel. To ensure that you add innovative and useful improvements to your application, follow a UX Design process. 

User Experience is often defined as the overall feeling, or experience, that a person has when using a product or service, but UX is also a process for designing innovative and useful solutions. The four main steps in the UX design process are:

  • Research
  • Interaction Design
  • Aesthetic Design
  • Evaluate & Iterate (throughout both design phases listed above)

Research
The purpose of the research process is to understand the design problem and to discover the business and user needs. By understanding the business needs, the users’ wants and needs, and the technical constraints, you can design a great user experience.

Venn diagram showing overlap of business needs, user wants, user needs, and technical constraints

The first step in the research process is to understand the business needs. Conduct interviews and workshops with business stakeholders to learn about their goals and requirements for the application. 

Next, conduct user research to learn about what the users want and need. There is a difference between wants and needs. Wants are requirements that users can easily identify, whereas needs are deeper requirements that users may not be able to consciously identify. To learn what users really need, conduct observational research. Observe users performing their typical tasks in the environment in which they normally perform those tasks. Learn about the users’ characteristics, their tasks, the tools and information sources they use, and their physical and social environment. Talking with users will identify what they want, but observation will reveal deeper insights into what they really need. 

Finally, in addition to learning about business and user needs, consider the technical constraints. You may think of the ideal solution to meet both business and user needs, but it has to fit within realistic technical constraints. 

Interaction Design
With the knowledge you’ve gained from the research phase, begin sketching out design ideas on a whiteboard. Then refine your sketches on paper, laying out the overall elements that will be on the screens, and specifying the interactions between the users and the system.

Design sketches

Next, create wireframes, which are low-fidelity, black and white designs that focus on the basics of layout and interaction. Creating your wireframes in a prototyping tool, like Indigo Studio, allows you to link screens together and simulate interactions. The ability to click through a prototype makes it much easier for project team members, stakeholders, and usability testing participants to understand how the design will work.

Wireframe prototype

Aesthetic Design
Early in the project, visual designers can work with the business stakeholders to learn about their vision for the design direction of the application. On our projects, visual designers create style tiles, which show different design directions that clients can choose from. Later, the chosen visual design direction can be applied to the final wireframes to create mockups that show what the actual screens will look like.

Visual design screen

Evaluation & Iteration
Throughout the Interaction Design and Aesthetic Design phases, we continually review our designs to the clients and project team to get their feedback and to make changes, as needed. We also conduct usability testing, in one-on-one sessions with representative users. We ask usability testing participants to attempt to perform tasks in the application. If we see that many of them have problems understanding or performing certain tasks, we know those represent problems that we need to redesign. 

Once we have an interaction design and aesthetic design that our clients are satisfied with and that have tested well with users, we create a design specifications document that provides the developers with all of the details they need to know to build the designs. 

The Role of User Experience
User experience is a design process that allows you to understand the nature of the problems to be solved. By understanding the business needs, the users’ needs and wants, and the technical constraints, you can create innovative, useful solutions.

India/APAC Webinar Recap: Create Enterprise Angular App with Ignite UI

$
0
0
Infragistics' webinar summary for building an enterprise Angular application with an in-depth look at the fastest Angular Data grid and components. (read more)

UXify 2018 – How to Design Complex Stuff You Don’t Entirely Understand

$
0
0

What do you do when you’re asked to design something very complex, in a domain that you know nothing about? How can you get up to speed quickly, in order to make the right design decisions? At UXify 2018, Rick Winslow, Head of Digital Innovation at Capital One Commercial Banking, will provide advice on “How to Design Complex Stuff You Don’t Entirely Understand.” 

UXify 2018: The Future of User Experience, our sixth annual, free UX conference, takes place on Friday, April 27 from 11 am – 5:30 pm, with networking from 5:30 - 7:00 pm. Lunch, snacks, and beer and wine during the networking are included.

Check out the UXify 2018 agenda and speaker list, and register for FREE.

How to Design Complex Stuff You Don’t Entirely Understand
By Rick Winslow, Head of Digital Innovation at Capital One Commercial Banking

Have you ever been asked to design something you can’t even begin to get your head around? Or to design something for expert users who speak a language of their own? Are the standard-issue tools of UX design, like personas, journey maps, and usability testing just not working? Do you find it impossible to explain to your parents and friends what you do?

Many industries — like finance, healthcare, and telecommunications — operate on complex and idiosyncratic systems. And the people who use those systems are often highly specialized experts. As demand for design spreads throughout these industries, designers are more and more likely to work on complex systems used by specialized experts. 

If you face these challenges, take heart! You are not alone. Learn some useful, practical coping strategies that can help you “fake it till you make it”.

Rick Winslow
Rick Winslow leads the digital innovation team for Capital One’s Commercial Banking business. He has spent about 20 years designing weird, obscure and complex software for both startups and large enterprises. He is a vocal proponent of agile, lean, human-centered-design, cross-functional collaboration and data science. He holds a BA from Columbia University and an MBA from Rutgers Business School. He also teaches in the Columbia University Applied Analytics program.

Register for UXify

Four simple steps to work with Ignite UI for Angular Navigation Drawer and Angular Routing

$
0
0

Ignite UI for Angular is a material-based library to speed up the development process of Angular web apps. There are more than 30 components available in Ignite UI for Angular, which help you to write high performance application faster.  You can learn more about Ignite UI for Angular here

In this article, we will follow a step-by-step approach to work with Ignite UI Navigation Drawer and Angular Routings.  The Ignite UI for Angular Navigation Drawer component is a side navigation container. It can rest on content and slide in/out of view or be pinned to expand/collapse within the content.

Learn official documentation of Ignite UI Navigation Drawer here

 This article will help you in adding Ignite UI for Angular Navigation Drawer in your existing project. However, if you are starting with a new project, you do not have to follow all these steps and using Ignite UI CLI, you can achieve all this in 3 simple commands. Before we go into step by step explanation, let us see how we can work with Ignite UI Navigation Drawer and Angular Routing using Ignite UI CLI.

Using Ignite UI CLI

To use Ignite UI CLI, install Ignite UI CLI and run the command ig on the command prompt. After that Ignite UI CLI will ask you options such as:

  1. Name of the project
  2. Framework : choose Angular
  3. Type of project: choose Ignite UI for Angular to work with native Ignite UI for Angular components. Another option is Ignite UI for Angular wrappers which is a jQuery based library.

 Refer the image below:

After the project is created, let us add an Angular component to the project.  To add use the arrow key. There are three type options for the component, choose any. In last select option Complete and Run using the arrow key.  After this step, Ignite UI will install dependencies using the npm. Once all dependencies are installed, change directory and run command ng serve to run the application created using Ignite UI CLI. You should get an application running as shown in the image below:

This application has following components

  1. Ignite UI for Angular navigation drawer
  2. Ignite UI for Angular Carousel.

 

So creating an application like above is as easy as this using Ignite UI CLI.  If you are working with existing project and wish to add Ignite UI for Angular navigation drawer read further. 

Using Ignite UI for Angular Navigation drawer in an existing project

To conclude this article, we will have an application using Angular Routing and Ignite UI for Angular Navigation Drawer as shown in the image below,

Step 1: Project Setup

Let us create an Angular project using Angular CLI.  In the application, add few Components to navigate.  We have added three components for routing. They are as follows:

  1. Home Component
  2. About Component
  3. Product Component

Additionally, there is a file called app-routing.module.ts file in the project for routing module.  

I have kept these components very simple. They all have one property title and that is displayed in the template. For your reference, components are as follows:

product.component.ts

import { Component } from '@angular/core';
 
@Component({
    selector: 'app-product',
    templateUrl: './products/product.component.html'
})
export class ProductComponent {
    title = 'Product View';
}

product.component.html

<h1 class='text-center'>{{title}}</h1>

Other components are the same as ProductComponent.

Step 2: Create Routes

In this step, we will create routing to navigate from one component to other component in our application.  It is a simple Angular route with path, component, and data properties set to some values.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { ProductComponent } from './products/product.component';
import { HomeComponent } from './home/home.component';
 
export const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent, data: { text: 'Home ' } },
    { path: 'banking', component: ProductComponent, data: { text: 'Products Details' } },
    { path: 'about', component: AboutComponent, data: { text: 'About' } }
 
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

 

I would like to draw your attention to data text property of the route. We will use this as the value of the navigation links in Ignite UI for Angular drawer.

Step 3: Importing Routes and Components

We have created routes and components. In this step, add those in main application module. For that import route module and components. Pass routes module as one of the value of imports array and components as one of the values of declaration array.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
 
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ProductComponent } from './products/product.component';
import { HomeComponent } from './home/home.component';
 
@NgModule({
    declarations: [
        AppComponent, AboutComponent, ProductComponent, HomeComponent
    ],
    imports: [
        BrowserModule, AppRoutingModule, BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

I have also imported BrowserAnimationModule. You need it to work with Ignite UI for Angular components and directives.

Step 3: Add Ignite UI for Angular to project

Let us start with adding Ignite UI for Angular library in the project. We can use npm to do this. So run the command shown below to install Ignite UI for Angular

npm install igniteui-angular

After installing Ignite UI for Angular, we need to install hammerjs. To install hammerjs run command as below:

npm install hammerjs

After installing Ignite UI for Angular, let’s make sure that the project references the Ignite UI for Angular styles and the hammerjs library in the angular-cli.json. Modify angular-cli.json as shown below:

angular-cli.json

"prefix""app",
    "styles": [
        "styles.css",
        "../node_modules/igniteui-angular/styles/igniteui-angular.css"    ],
        "scripts": ["../node_modules/hammerjs/hammer.min.js"],
            "environmentSource""environments/environment.ts",

Ignite UI for Angular styles uses the Material Icons. Let us import those in the styles.css as shown below:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

After that import hammerjs in main.ts as shown below:

import 'hammerjs';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

Step 4: Configure Ignite UI Navigation Drawer

In this step, we will configure Ignite UI Navigation Drawer to use Angular Routes we created in step 2.  Let us start with importing following in the AppComponent.

import { Component, OnInit, ViewChild } from '@angular/core';
import { NavigationStart, Router } from '@angular/router';
import 'rxjs/add/operator/filter';
import { routes } from './app-routing.module';
import { IgxNavigationDrawerComponent } from 'igniteui-angular/navigation-drawer';

We have imported NavigationStart and Router from router module to iterate through the routes and push navigation link.  In addition, we have imported ViewChild such that we can read IgxNavigationDrawerComponent as ViewChild and call its’ events, methods, and properties in the component class.

 Let us create two properties in AppComponent class,

  1. A property to hold navigation links
  2. A ViewChild property for Ignite UI navigation drawer

You can create these two properties as listed below:

public topNavLinks: Array < {
    path: string,
    name: string
} > = [];
@ViewChild(IgxNavigationDrawerComponent) public navdrawer: IgxNavigationDrawerComponent;

Next, in the constructor, we need to create navigation links from routes. That can be done as shown in the listing below:

constructor(private router: Router) {
    for (const route of routes) {
        if (route.path && route.data && route.path.indexOf('*') === -1) {
            this.topNavLinks.push({
                name: route.data.text,
                path: '/' + route.path
            });
        }
    }
}

We also need to make sure that drawer is closed when viewing on the mobile. This can be done in ngOnInit() life cycle hook as shown in the listing below :

ngOnInit() {
    this.router.events
        .filter((x) => x instanceof NavigationStart)
        .subscribe((event: NavigationStart) => {
            if (event.url !== '/' && !this.navdrawer.pin) {
                // Close drawer when selecting a view on mobile (unpinned)
                this.navdrawer.close();
            }
        });

Putting everything together, AppComponent class with Ignite UI navigation drawer configuration will look like below:

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { NavigationStart, Router } from '@angular/router';
import 'rxjs/add/operator/filter';
import { routes } from './app-routing.module';
import { IgxNavigationDrawerComponent } from 'igniteui-angular/navigation-drawer';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    public topNavLinks: Array<{
        path: string,
        name: string,
        icon: string    }> = [];
    @ViewChild(IgxNavigationDrawerComponent) public navdrawer: IgxNavigationDrawerComponent;
 
    constructor(private router: Router) {
        for (const route of routes) {
            if (route.path && route.data && route.path.indexOf('*') === -1) {
                this.topNavLinks.push({
                    name: route.data.text,
                    path: '/' + route.path,
                    icon: route.data.icon
                });
            }
        }
    }
 
    public ngOnInit(): void {
        this.router.events
            .filter((x) => x instanceof NavigationStart)
            .subscribe((event: NavigationStart) => {
                if (event.url !== '/' && !this.navdrawer.pin) {
                    // Close drawer when selecting a view on mobile (unpinned)
                    this.navdrawer.close();
                }
            });
    }
}

Step 5: Configure Ignite UI Navigation Drawer

Next, in the template of AppComponent, we will use ig-nav-drawer and set various properties such as

  • Header
  • igxFlex
  • navbar
  • content area which would be router-outlet

We are using various directives such as igxLayout, igxDrawerItem, igxRipple to create the drawer. Besides directives, we are using components such as igx-nav-drawer and igx-navbar.  You can read more about them on official documentation here.

Putting everything together, the AppComponent template will look like the below listing:

app.component.html

<div class="main" igxLayout>    <igx-nav-drawer #nav id="project-menu" isOpen="false" [enableGestures]='true' width="280px">        <ng-template igxDrawer>            <header igxDrawerItem isHeader="true">Views</header>            <span *ngFor="let route of topNavLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{route.path}}">                {{route.name}}            </span>        </ng-template>    </igx-nav-drawer>    <div igxFlex>        <igx-navbar title="IgniteUI for Angular Grid Sampler" actionButtonIcon="menu" (onAction)="nav.toggle()" igxFlex>        </igx-navbar>        <div class="content" igxLayout igxLayoutJustify="center">            <router-outlet></router-outlet>        </div>    </div></div>

You can see that we are iterating routes and then adding the router link and router name to the drawer.

Step 6: Run application

On running the application, you will see Ignite UI for Angular navigation drawer in action working with Angular Routing as shown in the image below:

You can navigate between components by clicking on header items in the drawer.

Conclusion

In this post, we learned about using Ignite UI for Angular Navigation drawer in existing Angular project. We also saw how easy it is to create applications using use Ignite UI CLI.  If you like this post, please share it. In addition, if you haven’t checked out Infragistics Ignite UI for Angular Components, be sure to do so! They’ve got 30+ material based Angular components to help you code speedy web apps faster


UXify 2018 – Is it Time to Switch to Conversational UI?

$
0
0

What advantages do conversational user interfaces have over traditional, graphic user interfaces? Michael Eydman, Senior Consultant at ABME Corporation, will discuss these issues and present case studies in his presentation, “Is it Time to Switch to Conversational UI?” at UXify 2018. 

UXify 2018: The Future of User Experience, our sixth annual, free UX conference, takes place on Friday, April 27 from 11 am – 5:30 pm, with networking from 5:30 - 7:00 pm. Lunch, snacks, and beer and wine during the networking are included.

Check out the UXify 2018 agenda and speaker list, and register for FREE.

Michael Eydman

Is it Time to Switch to Conversational UI?
By Michael Eydman, Senior Consultant at ABME Corporation

There is a new UI paradigm on the rise. Commonly used graphical interfaces have limitations. Fixed screen real estate and resolution constraints present a constant challenge for creating intuitive and easily navigable interfaces on commonly used devices like phones and tablets. With recent improvements in speech recognition and text synthesis technologies, conversational user interfaces have become a viable option. Conversational UI uses natural language processing to expose much more complex and feature-rich interfaces, which would be difficult to accomplish through traditional graphical UI. It can also be distributed through more channels, which includes traditional on-site chatbots, as well as those available on instant messaging platforms and home virtual assistants, like Amazon’s Alexa. In this presentation, I would like to cover a few use cases, where cross-channel conversational UI can help drive more conversions for a retail enterprise. I will also cover more prominent frameworks and platforms which can be used to create chatbots used in Conversational UI.

Michael Eydman
Michael is a Senior Consultant at ABME Corporation, a management consulting firm. He has over two decades of professional experience consulting companies of various sizes in areas which include Digital Transformation, Innovation, and Process Improvement. He works at the crossroads of business and technology, taking raw ideas and developing capabilities necessary to enable them. Michael keeps up to date with current trends in emerging technologies and provides thought leadership to major retail and manufacturing companies, including L’Oreal and Heineken. He has set up a number of successful programs adopting new products and services in areas of machine learning, AI, and data science.

Register for UXify

 

Have You Checked Out Our Award Winning BI Software?

$
0
0

As you may have seen last month, we recently earned a bunch of awards, but one stands out, in that our ReportPlus customers are a part of how we received the recognition. Infragistics earned the prestigious Expert’s Choice Award for 2018 from FinancesOnline, a popular B2B software review platform. This recognition is given out annually to products that provide outstanding solutions for B2B companies across a number of categories, including the leaders in the Business Intelligence Software market.

With an overall review score of 9.4 out of 10, and a user satisfaction score of 100% at the time of this writing, ReportPlus was also included in the Top 3 in FinancesOnline’s latest list of the Best Business Intelligence Software and received the Great User Experience Certificate, and Supreme Software Award.

    

In evaluating ReportPlus for the 2018 Expert’s Choice Award, FinancesOnline’s team of software experts examined and compared us with competitors like Sisense, Zoho Reports, and Looker, in various scenarios.

If you are a current ReportPlus customer, please visit FinancesOnline.com to post your own review of ReportPlus and thanks for your support!

If you haven’t had a chance to see why FinancesOnline thinks we’re great, sign up to learn how you can start your company’s digital transformation by unlocking data insights with a free trial or learn about our exclusive workshops to help you get a running start.

How to Count the Number of Properties of the JavaScript Object

$
0
0

While working with JavaScript, I come across a requirement to count a number of properties in a JavaScript object.  I found two ways to find the number of properties in an object. They are as follows:

  1. Using for loop
  2. Using Object.keys

Consider an object, “cat”, as demonstrated below:

var cat = {
 
    name: 'foo',
    age: 9
}

You can find a number of properties by iterating in a for loop and update counter, as shown in the below listing:

let count = 0;
for (var c in cat) {
 
    count = count + 1;
}
console.log(count);// 2

Above code will print “2” as output.  

The above approach not only prints the object’s own enumerable properties, but it also prints properties of objects to chich it is linked.  To further understand it, let us consider listing:

var animal = {
 
    canRun: true
}
 
var cat = {
 
    name: 'foo',
    age: 9
}
 
cat.__proto__ = animal;

There are two objects, cat and animal, and the cat object is linked to an animal object using __proto__ property.  Now, when you use for loop to iterate and count a number of properties, it will also count enumerable properties of the animal object. Therefore, the code listing below will print “3”.

var animal = {
 
    canRun: true
}
 
var cat = {
 
    name: 'foo',
    age: 9
}
 
cat.__proto__ = animal;
 
let count = 0;
for (var c in cat) {
 
    count = count + 1;
}
console.log(count);// 3

JavaScript for loop will iterate all linked properties of the object.

To count the object’s own enumerable properties, you may consider using another approach, Object.keys(), which only enumerates the object’s own enumerable properties. It does not enumerate the object’s linked properties.

Moving forward, let us again consider cat object which is linked to animal object and count number of properties using Object.keys:

var animal = {
 
    canRun: true
}
 
var cat = {
 
    name: 'foo',
    age: 9
}
 
cat.__proto__ = animal;
 
var count = Object.keys(cat).length;
console.log(count);

Now you will get “2” printed as output.

Object.keys only enumerates the object’s own enumerable properties.

If the object’s property enumerable is set to false, then it is not a member of Object.keys array.  Let us again consider cat object and set its name property enumerable to false.

var cat = {
 
    name: 'foo',
    age: 9
}
 
Object.defineProperty(cat, 'name', { enumerable: false });

 

Now, when you use Object.keys to find a number of properties, it will count only one.

var count = Object.keys(cat).length;
console.log(count);  // print 1

In closing, these are the two ways that you can use to find a number of properties in a JavaScript object.  

If you like this post, please share it. In addition, if you haven’t checked out Infragistics Ignite UI for Angular components, be sure to do so! We’ve got 30+ material based Angular components to help you code speedy web apps faster.

UXify 2018 – Building Great User Experiences using Infragistics Ignite UI

$
0
0

At UXify 2018, Infragistics’ Todd Snyder will demonstrate how to use Ignite UI’s rich developer tools to build great user experiences. UXify 2018: The Future of User Experience, our sixth annual, free UX conference, takes place on Friday, April 27 from 11 am – 5:30 pm, with networking from 5:30 - 7:00 pm. Lunch, snacks, and beer and wine during the networking are included. 

Check out the UXify 2018 agenda and speaker list, and register for FREE.

Todd Snyder

Building Great User Experiences using Infragistics Ignite UI
By Todd Snyder, Product Architect at Infragistics

This session will explore how to harness the power of Infragistics rich developer tools for Web (JavaScript) to build great user experiences. Whether you need to build dashboards for your sales force, need to provide rich experiences to your corporate end users or want to build the next great mobile web experiences this session will provide you with the knowledge of how to utilize Infragistics Ignite UI to amaze and delight your customers.

Todd Snyder
Todd Snyder has been a software developer/architect for over 23 years. During that time, he has focused on providing technical guidance and leadership for the development of enterprise-class systems on the Microsoft and Web Platforms. At Infragistics, he is a Product Architect on ReportPlus Web and Server Teams. Todd is the co-leader for the New Jersey .NET User Group and is a frequent speaker, book author, and co-host of the Static Void Podcast.

Register for UXify

Getting to Know the Widget Editor

$
0
0

If you have been using ReportPlus, you know how easy it is to create dashboards with any number of data sources. ReportPlus is built by user experience experts and made for business users. It has a familiar drag and drop experience, it is simple to create or edit your visualizations to tell your story within minutes. However, data can be a little overwhelming to some, and visualizations are a big help. Today we are going to walk through the widget editor step by step.  

When you come into the editor, you will see three panels. The left side panel is where you will find all the available fields for the data source you are working with. Depending on which data source that is you will either have a flat list of fields or one broken up into metrics and dimensions.

                                

Flat fields from Excel                           Metrics & Dimensions from Cube

All of these fields are available for you to be dragging and dropping into the pivot panel to start creating your visualization. In this panel, you will find a section for filters, columns, rows, and values.

Using a sample set of marketing data from an excel file you can see in the image below that dragging the Date that emails were sent in field into the rows columns will populate the dates down the first line, the category of those fields become columns, the values populated are the sum of opened emails, and there is a local filter about the grid that allows you to quickly filter while in view mode.

Clicking on any of the fields that you bring over to the pivot panel unlocks additional options for these fields such as whether you want:

  • Your dates displayed as days, months or years
  • To filer by a rule (Year to date, Month to date, Last 7 Days, etc.)
  • To change the label of the field as it appears in your visualization
  • Change the sorting of the fields
  • To change the formatting of your values to have commas, decimals, and more

                                                              

Moving over to the left-hand panel is where you will choose from over 30 different visualization types to visualize your data how you like.

After you have your visualization, you can change some different chart aspects in the chart settings. You can change styles of your table, bounds to your gauges, the color of your variables, add Trendlines, configure your axis, and so much more. The additional tabs on the bottom of the visualization panel will also unlock a number of additional features.

Parameters allow you to manually select the parameters of your data from the source. For example, you may not want to pull in an entire excel sheet and only pull in two columns.

                         

 

Binding widget data to a dashboard filter can be done in two ways: either as part of the Dashboard Filter configuration or in the Dashboard Filters Binding section. The binding is defined by adding rules that link a field in the dashboard filter data set with a corresponding field in the widget’s data set.

For more information on the dashboard, filtering visit the dashboard filters and binding section of our documentation.

                         

 

The actions tab of the editor allows you to link visualizations to other dashboards or a URL by events such as maximizing a widget, clicking on a grid, or clicking on a chart/column bar. This feature takes the concept of drill-down navigation to a new level; for instance, if you want to provide more detail on the information displayed, you can use a whole new dashboard.

For more information on dashboard linking visit the Navigation between Dashboards section of our documentation.

                         

 

The general tab of this panel allows you to rename the title of the visualization, decided whether you want to show a title or not and gives you the data source and path to that source.

                         

 

Interested in building your own dashboards? Download a free trial of any of our ReportPlus platforms now, or contact us to see the wonders it can do for your team’s productivity!

Viewing all 2223 articles
Browse latest View live