Your message is highly valuable for us. One of our experts will follow up with you within 1-2 business days to discuss your request or to inquire for additional information if needed.
Success Story: Using Angular 2 Out Of the Box for MS SharePoint Project
In our previous article, we told about the specifics of the recently released new version of Angular 2.0. In this subsequent article, we will share our experience using Angular 2 as a frontend and MS SharePoint as a backend to build a real product for our client, a global EU-based telecom provider. The product, an automated solution for meeting protocols, is a part of our Angular 2.0-based solutions portfolio we’re currently developing for this customer.
Challenges of Integrating Angular 2.0 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 Certiﬁed 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 2 as it would allow better support and scalability in the future. The main challenge was to integrate Angular 2 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 2 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 2 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 Angular 2 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 2 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 2. 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 2 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 2, or would you like to get an advice or quote? Contact us now to learn more!