Adding Paging capability into HTML table using AngularJS

Background

This is in continuation with my previous post in which we made HTML table sortable if you haven’t read it yet, give it a read first at URL. Next obvious request from end users is to introduce pagination in it.

Solution

We will be coming up with the following table in which data can be sorted and paged at the same time, this will have all of its data retrieved on the client side for paging and sorting.… [Keep reading] “Adding Paging capability into HTML table using AngularJS”

Making HTML table sortable in AngularJS

 

Problem

We were working on a project and have built its front-end on AngularJS v1.6.6 along with Office UI Fabric, we have used community-driven library ngofficeuifabric when we came across a situation of table sorting and realised that it wasn’t a great fit for our custom sorting and filtering requirements raised during future sprints by our product owners and business in general.

Solution

We have replaced ‘uif-table’ with ‘table’ and added custom events for sorting, the markup  is as follows:
[code language=”html”]

ID


 



 


Object ID


 



 


Object Date Submitted


 



 


Object Date


 



 


{{item.ID}} {{item.ObjectID}} {{item.DateSubmitted | date:’dd MMM yyyy’}} {{item.ObjectDate | date:’dd MMM yyyy’}}

[/code]
You need to have two variables to store what ‘order’ is required (ascending/descending) and which ‘field’ (column) to sort records on, we have initialised these variables as follows:
[code language=”javascript”]
//setting sorting variables for the first page load
$scope.sortAsc = false;
$scope.sortField = ‘item.ID’;
[/code]
We have attached a function to table header to record a click on a specific column and get the column’s desired sorting order, this will just record at the start of the function to set the direction for sorting.… [Keep reading] “Making HTML table sortable in AngularJS”

Building websites with Ionic Framework, Angular and Microsoft Azure App Services

The Ionic Framework (https://ionicframework.com/) is an angular 4 based framework that is designed to build beautiful applications quickly and easily that can be targeted to native platforms as well as Progressive Web Apps (PWAs).  In this blog post, I’ll walk through the steps to start your own Ionic PWA hosted on Azure App Services, which will then serve your application.

What is Microsoft Azure App Services?

Microsoft Azure is a cloud platform that allows you to host server workloads that you’d previously host locally in a data centre or on a server somewhere to be hosted in an environment where massive scale and availability becomes available at an hourly rate.… [Keep reading] “Building websites with Ionic Framework, Angular and Microsoft Azure App Services”

Angular Bag of Tricks for SharePoint

Introduction

I’ve been using Angular 1.x for building custom UI components and SPAs for SharePoint for years now. There’s a lot of rinse and repeat here, and over time my “stack” of open-source custom Directives and Services that make Angular such a powerful framework, have settled down to a few key ones that I wanted to highlight – hence this post.
Some may be wondering why am I still working almost exclusively with Angular 1.x? Why not Angular 2, or React, or Aurelia?… [Keep reading] “Angular Bag of Tricks for SharePoint”

Gracefully managing Gulp process hierarchy on Windows

Process Tree

When developing client side JavaScript, one thing that really comes in handy is the ability to create fully functional stubs that can mimic real server APIs. This decouples project development dependencies and allows different team members to work in parallel against an agreed API contract.

To allow people to have an isolated environment to work on and get immediate feedback on their changes, I leverage the Gulp.js + Node.js duo.

“Gulp.js is a task runner that runs on Node.js that it is normally used to automate UI development workflows such as LESS to CSS conversion, making HTML templates, minify CSS and JS, etc.[Keep reading] “Gracefully managing Gulp process hierarchy on Windows”

Building Applications with Event Sourcing and CQRS Pattern

When we start building an application on cloud, like Azure, we should consider many factors. Those factors include flexibility, scalability, performance and so on. In order to satisfy those factors, components making up the application should be loosely coupled and ready for extension and change at any time. For those considerations, Microsoft has introduced 24 cloud design patterns. Even though they are called as “Cloud Design Patterns”, they can be used just for application development anyway.… [Keep reading] “Building Applications with Event Sourcing and CQRS Pattern”