Integrating Angular with SharePoint for Innovative Business Solutions

Success Story: Using Angular Out Of the Box for MS SharePoint Project

Challenges of Integrating Angular with SharePoint

Our customer is one of the world’s largest telecom providers. Based in the EU, the telecom giant has over 200 million customers and 15+ subsidiaries in countries across Europe and Asia.

Our customer was in a need of an MS SharePoint solution to automate the meeting protocols management on a global scale of all daughter companies. As a Microsoft Gold Certified Partner and expert in SharePoint consulting and development, Infopulse was ready to develop such product for the client.

We’ve chosen to build the frontend part with Angular as it would allow better support and scalability in the future. The main challenge was to integrate Angular with SharePoint, as the latter has its own aspects requiring a specific approach, i.e., event model, page load and navigation rules.

• SharePoint lists are used to store data for the app. Correspondingly, this approach requires using SharePoint REST API. At the same time, this brings some limitations. To compensate these limitations, we need to use SharePoint Client – Side Object Model (CSOM) as the latter works on-demand and has its own call structure. All that requires extra work to be conducted on frontend: both REST API and CSOM approaches should be integrated and bridged, resulting in a sort of a hybrid solution.
• Differences in UI presentation. SharePoint styles largely depend on master pages. Thus, all pages of an app inherit the general layout of a master page. This calls for a rather intricate approach when processing UI elements with Angular in terms of UI elements layout and rendering on the frontend. The same challenge should be dealt with when working with the page navigation structure.
• Compatibility. Being a Microsoft product, SharePoint should support IE11, which in its turn, sadly, doesn’t support modern frameworks natively. Thus, polyfills were a must, allowing to bring development flexibility, a proper IE11 support and ensure the correct output of information in modern browsers like MS Edge, Google Chrome or Firefox.

Despite these complications, we were ready to pioneer Angular and implement it in a commercial project.

Solution for Meeting Protocols Detailed

Our product provides a generally centralized control over the management of meeting protocols. The system brings a unified meeting management environment for the whole group of companies, allowing to produce protocols regardless if a meeting is held within only one company or within all subsidiaries.

After each meeting, a link to a meeting protocol is automatically sent to all meeting participants. The system fills in some basic information, e.g., the place, time and date of a meeting, meeting organizer, lists of participants, taking into account employees’ status (internal, external or invited experts), etc. As soon as the meeting protocol template is generated, the task owners gain access to tasks management tools (i.e., tasks creation and editing, setting task’s assignees, meeting and tasks status editing, etc.).

Another important feature of our solution is a centralized database and storage of all meeting protocols. This allows for a quick protocol search, saving time and vastly improving visual understanding of the meeting processes. E.g., the CEO of the parent company can easily check when the CEO of a daughter company held the meeting, what tasks were set and who are responsible for these tasks.

The system was developed in 2 months. It has been successfully deployed in company’s headquarters and will be adopted by all subsidiaries in the nearest future. Infopulse currently develops new functions, such as tasks statuses and deadline notifications, possibility to assign tasks supervisors, generation of protocol report files, etc.

Other AngularJS Projects

In parallel with this project, Infopulse develops a whole portfolio of related products for this customer, e.g., task manager for the top executives. Initially a traditional SherePoint app, the system is specifically designed to be used by CEOs and board of directors. All features are tailored to specific functions performed by the companies’ managers, thus a dedicated organizational structure was developed for the app (possibility to select tasks assignees, assistants, controllers, assistants to controllers, etc.). This system frontend will be updated to use Angular as well.

Among other projects we’re currently working on, are the mobile apps for the same client. One of these apps developed both for the desktop and handheld devices, facilitates interaction of the company representatives with the government entities. Each of the company’s subsidiaries has to meet the local regulations, get regular and timely notifications on changes to the laws, coordinate communication with the government officials, etc. This app allows to get quick access to required information and carry out timely decisions on the go.

Infopulse and our client are very happy with the results we achieved with Angular. The new version of the framework empowered us with effective tools to build high-performing and efficient frontends for the web and mobile applications. We see Angular as a perfect solution, suitable both for simple entertaining apps and for complex enterprise-level systems and we’ve successfully adopted it for our future projects.

Do you have any questions about our experience of working with Angular, or would you like to get an advice or quote? Contact us now to learn more!