Saturday, November 21, 2015

Tiny but mighty Angular Directive: Record Status Indicator

In posts with similar title, I am planning to show some small Angular Directives that are not huge in terms of code but provide very useful functionality and greatly enhances the user experience.

You may have come across business applications in which records can be soft deleted – means they exists in the system but users are not allowed (or encouraged) to select those records. Such data preservation is helpful especially when historical data is required to be maintained in the system.

So I thought it would be nice to visually indicate if a particular record that user is looking at on screen is active or not. Consider the list of records below. The tiny status indicator just before the indicator clearly shows id record is active or inactive.

SNAGHTML378d23c1

Another example in the system, when user is trying to select a Carrier Authority in a dropdown:

SNAGHTML3793f07a

The dropdown includes all values but clearly shows that users should not use Inactive records. Like I said, the code for showing such status indicator is very tiny but brings a lot of value for the end users.
The code for the status indicator is provided below, you need to keep two things in mind:
1. It requires an entity with isActive property set to true or false depending in status of the record in the system
2. It uses Font Awesome icons and some color styles. You need to make sure Font Awesome and appropriate styles are included in your project.
app.directive('stStatusIndicator', function () {
return {
restrict: 'A',
scope: {
entity: '=stStatusIndicator'
},
link: function (scope, element, attr, ctrl) {
scope.$watch('entity', function (newValue, oldValue) {
if (newValue == undefined || newValue == null) {
element.empty();
}
})
scope.$watch('entity.isActive', function (newValue, oldValue) {
if (newValue == undefined)
return;

element.empty();
var node = document.createElement("i");
if (newValue == true) {
node.className = "fa fa-circle text-green hidden-print";
node.title = "Active";
}
else {
node.className = "fa fa-ban text-danger hidden-print";
node.title = "Inactive";
}
element.append(node);
})


}
};
});



Such visual indications can definitely be extended to other concepts such as indicating status of record in workflow, recently updated record so on and so forth. Hope you enjoyed the technique!

Thursday, November 19, 2015

Have TypeScript working with VS.NET 2013/2015 SharePoint Project Template

Assuming that…

1) You have latest TypeScript for Visual Studio installed

2) You have a SharePoint project and you add TypeScript file to it. Everything appears fine but you can’t generate .js file when you save it.

 

Following steps should solve the problem:

Step 1

Go to

C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\SharePointTools (For Visual Studio 2013, that is: C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v12.0\SharePointTools) and open Microsoft.VisualStudio.SharePoint.target file in notepad

Step 2

Add following just before the <Import Project="$(CustomBeforeSharePointTargets)" …… line in the targets file

<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />

Step 3

Save the file and re-open VS.NET with SharePoint project. Try saving the .ts files and now you should have corresponding .js files generated.

Basically, the above target calls the Microsoft.TypeScript.targets which eventually will run the TypeScript compiler when .ts files are saved.

Step 4 (Optional)

Although the targets calls the right version of compiler, you might following problem:

After installing TypeScript 1.6 for VS.NET, typing “tsc –v” in package manager should result in 1.6.x. If not, it’s very likely that you had older version of VS.NET which created a PATH variable with old TypeScript location.

To fix it:

Open PATH variable value of the computer, remove old value of TypeScript location and replace with following:

C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.6

Reopen VS.NET and you should be good!