Sitefinity Features Revealed in a Site and Mobile App

by
Peter Filipov
Nov 09, 2016

Two years ago, the Sitefinity team released a sample application showcasing major features of the CMS and how to use them. As time passed and technologies and methodologies changed, our application fell behind.

The truth is, we need to cover the entire experience starting with a modern looking website and ending with a fast performing mobile app. That is why we completely revamped the “Quantum” sample application with a mobile app powered by NativeScript. These examples can be used as a guideline for your development with Sitefinity.

TL;DR

Get the website and the mobile app source code. Set up NativeScript, host the site on IIS, configure the endpoints in the app.js file and run it in the emulator. Enjoy the new look and feel and start tweaking everything.

Why we need everything on one place

Using many features in one codebase is a perfect way to help developers understand how to structure and combine them when they want to build a big and complex site. It might seem obvious that the focus is on the core features of the CMS, but they are the foundation of each project. Blogs, news, events and forums are the main data entities on the site and we are showing them with new layouts with navigation through categories.

Storing documents is another capability demonstrated in the downloads section.

When it comes to events, the built-in calendar widget comes in handy. The control gives you adaptive and responsive rendering suitable for different devices.

Custom modules, user management, forums and multilingual support are key parts of every modern site, so that applies here as well.

What we had until now

Don’t get me wrong, I love the old version of “Quantum,” but it is old. The design of the site is outdated and needed to be changed. One of the most important things about a website is its look and feel, and, with the new version, we are following the latest trends in site design. You can see the difference in the screenshots below.

Regarding functionality, the first version of the web site covers everything that is needed, while in v2.0, specific endpoints for mobile apps have been added.

What technologies are used?

In v1.0, the web app heavily relies on WebForms, but in v2.0, everything has been rewritten in MVC and Feather because they are faster and lighter. The Bootstrap framework is used to help make the site responsive.

Mobile support and why it is so important

To have a complete development story today, you need to run on mobile devices flawlessly. The responsiveness of a website is not something that developers can consider whether to do or not. This is priority number one for many companies.

With the help of Bootstrap, the site has responsive/adaptive components, but, many times, this is not enough. In these cases, you can go one step further and implement a mobile app with Sitefinity and NativeScript.

If you are wondering what NativeScript is and whether you have the skill set to develop with it, the answer is simple—yes, you can and you can use your current set of skills to start right away. For more details, review, Every ASP.NET WebForms Developer is Mobile Developer.

To get started with the demo, set up NativeScript, download the source code here, host your “Quantum” application on IIS, configure the endpoints from the app.js file and run it. Keep in mind that the app is optimized for HD resolution.

How do I log in?

Create a user only with “Users” role in the backend and login to the app.

Can I use the samples in DigitalFactory?

The answer is yes. Deploy the web site package to the system and then configure the endpoints in the app.js file in the mobile app.

How can I test it with a live URL?

When you create an account in sitefinity.com, you will have the option to create a sandbox instance of the Quantum sample to play with.

Outcome

With the above samples you will be able to kick start how to create web sites and mobile apps. So feel free to download the project, host them locally, start tweaking everything and learn by doing.

About the author

PeterFilipov

Peter Filipov (Pepi) is a Developer Advocate focused on Sitefinity. He is passionate about web development and sports. Prior joining the DevRel team, Pepi was one the team leaders in the Telerik Web Components division.

Webinars

Tools

Progress, Telerik, Sitefinity and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.