--- title: "Creating a Story Estimator Application with Syncfusion ASP.NET Core Controls" published_at: "2019-04-29T11:00:59+00:00" modified_at: "2021-08-18T18:12:13+00:00" url: "https://www.syncfusion.com/blogs/post/story-estimator-with-syncfusion-asp-net-core-controls" excerpt: "Overview In this blog, I have created the Story Estimator application as an example of Single Page Application you can make with a combination of Syncfusion ASP.NET Core controls. Here, I will first explain how this application works, and then..." taxonomy_category: - "ASP.NET Core" - "Essential JS 2" - "JavaScript" - "Web" taxonomy_post_tag: - "Agile" - "ASP.NET Core" - "Essential JS 2" - "planning-poker" - "story" - "Story estimator" --- # Creating a Story Estimator Application with Syncfusion ASP.NET Core Controls [Ramkumar S](https://www.syncfusion.com/blogs/author/ramkumar-s) ![Story estimator](https://www.syncfusion.com/blogs/wp-content/uploads/2019/04/Story-estimator.png) ## Overview In this blog, I have created the Story Estimator application as an example of [Single Page Application](https://en.wikipedia.org/wiki/Single-page_application) you can make with a combination of [Syncfusion ASP.NET Core controls](https://www.syncfusion.com/aspnet-core-ui-controls) . Here, I will first explain how this application works, and then how I used Syncfusion ASP.NET Core controls to build it. ## The Story Estimator The Story Estimator is an effective Agile-based tool for estimating story points for stories using [Planning Poker](https://en.wikipedia.org/wiki/Planning_poker) techniques. *Planning Poker* is an Agile estimating and planning technique that is consensus-based. Agile teams around the world use this kind of tool to estimate how long a certain amount of work will take to complete. The purpose of this tool is to make sure that each person on the development team is actively participating in the estimation process and contributing their opinion. ### The Room Creation As a first step, organizer creates a room (session) and imports all the stories to be estimated. Normally, the product owner or team lead who organizes the session will be the organizer, and their team members are players or estimators. So, the organizer will invite their team members for this session. ### The Story Estimation After starting the session, the organizer reads the description of the user story for which the estimation is to be made. If the estimators raise any questions, then the organizer will answer them. Each estimator has a separate play screen with cards that hold values like 0, 1, 2, 3, 5, 8, 13, 20, 40, and 100. The values represent the number of story points, ideal days, or other units the team follows. The estimators discuss the story or feature by asking the organizer questions, if needed. When the story or feature has been fully discussed, each estimator privately selects one card to represent his or her estimate. After all the estimators select their estimates, the organizer will reveal everyone’s selection. If everyone has selected the same value, it becomes the estimate. If not, all the estimators will discuss their estimates. The high and low estimators will share their reasoning. According to the discussion, the organizer will finalize the estimate of the selected story. If required, repeat the process until the estimate is finalized. ![Story estimator - Admin play area](https://blog.syncfusion.com/wp-content/uploads/2019/04/Story-estimator-Admin-play-area.png) *Story estimator – Admin play area* ![Average story point estimated](https://blog.syncfusion.com/wp-content/uploads/2019/04/Average-story-point-estimated.png)*Average story point estimated* Demo: [https://aspdotnetcore.syncfusion.com/showcase/aspnetcore/story-estimator/](https://aspdotnetcore.syncfusion.com/showcase/aspnetcore/story-estimator/) This **Story Estimator** was developed using Syncfusion components. Let’s see how Syncfusion components are part of Story Estimator and where they are used. - [Accumulation Chart](#accumulation-chart) - [Button](#button) - [Checkbox](#checkbox) - [Circular Gauge](#circular-gauge) - [Dialog](#dialog) - [Data Grid](#data-grid) - [Input Mask](#input-mask) - [Radio Button](#radio-button) - [Sidebar](#sidebar) - [Split Button](#split-button) - [Uploader](#uploader) ## Accumulation Chart The [Accumulation chart control](https://ej2.syncfusion.com/aspnetcore/documentation/accumulation-chart/getting-started/) is a circular graphic, that can be divided into multiple segments to illustrate numerical proportions. All the elements are rendered as Scalable Vector Graphics (SVG). We use this chart to represent the team average for votes. It will display after flipping all the cards. This chart groups similar data and the legend shows the values. ![Chart to represent average story points](https://blog.syncfusion.com/wp-content/uploads/2019/04/Accumulation-chart.png)*Chart to represent average story points* This chart has some key features, that supports: - Local binding and remote data sources. - Arranging the labels smartly without overlapping. - Interactive features such as tooltip, explode, and selection. - Club points to group the values of category. ## Button The [Button](https://ej2.syncfusion.com/aspnetcore/documentation/button/getting-started-core.html?syntax=tag) control is a graphical user interface element that triggers an event when clicked. It can contain text, an image, or both. We used Syncfusion buttons in many places in this application. Syncfusion Button key features: - Different button types. - Predefined button styles. - Easy button customization. - Buttons can use texts and icons. ## Checkbox The [Checkbox control](https://ej2.syncfusion.com/aspnetcore/documentation/check-box/getting-started-core.html?syntax=tag) is a graphical user interface element that allows you to select one or more options from a group of choices. It contains checked, unchecked, and indeterminate states. We used check boxes in this application to remove multiple stories at a time from the discussion phase. ![Checkbox to select the stories](https://blog.syncfusion.com/wp-content/uploads/2019/04/Checkbox.png)*Checkbox to select the stories* ## Circular Gauge The [Circular Gauge control](https://ej2.syncfusion.com/aspnetcore/documentation/circulargauge/) is ideal to visualize numeric values over a circular scale. Scalable Vector Graphics (SVG) is used to render all element of circular gauge. We used the Circular Gauge control to represent the story timer. The story timer reminds the organizer to estimate a story within a specified time range. The optimal time range is set as 15 minutes, and you can change it during room creation. ![Circular Gauge as timer](https://blog.syncfusion.com/wp-content/uploads/2019/04/Circular-Gauge.png)*Circular Gauge as timer* Syncfusion Circular Gauge key features: - Add custom elements to the gauge using annotations. - Use interactive features like tooltip and pointer drag and drop. - Add multiple pointers to the gauge. - Add multiple axes and ranges. - Use animation for pointers. ## Dialog The [Dialog control](https://ej2.syncfusion.com/aspnetcore/documentation/dialog/getting-started-core.html) is a window that displays information to a user, requests and accepts user input. We used dialog for several purposes; creating the room, confirmation, warning messages, and some alerts. ![Dialog used as form](https://blog.syncfusion.com/wp-content/uploads/2019/04/Dialog.png)*Dialog used as form* Syncfusion Dialog key features: - Model and modeless dialogs. - Button: Render buttons in the Dialog footer. - Templates: Customize Dialog header and footer through a template. - Draggable: Drag the Dialog within the page or container. - Animation: Use customized animation support when opening and closing a dialog. - Localization: Localize the default close icon title text to different cultures. ## DataGrid The [DataGrid](https://ej2.syncfusion.com/aspnetcore/documentation/grid/getting-started-core.html?syntax=tag) control is used to display and manipulate tabular data with configuration options to control the way the data is presented. It can pull data from data sources such as an array of JavaScript objects, OData web services, or the DataManager and bind data fields to columns. It also displays the column header to identify the field with support for grouped records. We used the DataGrid to represent user stories and the players list. We have done some simple customization and changed the grid view to a more elegant look. The DataGrid is very lightweight, so it does not increase the process time of the application. ![DataGrid used to list the stories](https://blog.syncfusion.com/wp-content/uploads/2019/04/DataGrid.png)*DataGrid used to list the stories* Syncfusion DataGrid key features: - **Data sources:** Binds the DataGrid component with an array of JavaScript objects or DataManager. - **Sorting and grouping:** Supports n level of sorting and grouping. - **Filtering:** Offers filter bar in each column to filter data. - **Paging:** Allows easy switching between pages using the pager bar. - **Reordering:** Allows the drag and drop of any column anywhere in a grid’s column header row, thus allowing repositioning of columns. - **RTL support:** Provides right-to-left mode that aligns the grid content from right to left. - **Localization:** Provides inherent support to localize the UI. ## Input Mask The **[Input Mask control](https://ej2.syncfusion.com/aspnetcore/documentation/maskedtextbox/getting-started.html?syntax=tag)** allows users to enter valid input based on the provided mask. We used the Input Mask to set the story timer value when creating the room. ![Input mask used to create rooms](https://blog.syncfusion.com/wp-content/uploads/2019/04/Input-mask.png) Input mask used to create rooms Syncfusion Input Mask key features: - Custom characters: Use your own characters as the mask elements. - Regular expression: Use as a mask element for each character of the Input Mask. - Accessibility: Access all the Input Mask component features through the keyboard, on-screen readers, or other assistive technology devices. ## Radio Button The **[Radio Button control](https://ej2.syncfusion.com/aspnetcore/documentation/radio-button/getting-started-core.html?syntax=tag)** is a graphical user interface element that allows you to select only one option from a set of choices. It contains checked and unchecked states. We used the **Radio Button** to select card value when creating the room. ![Radio button used to select card values](https://blog.syncfusion.com/wp-content/uploads/2019/04/Radio-button.png)*Radio button used to select card values* ## Sidebar The **[Sidebar control](https://ej2.syncfusion.com/aspnetcore/documentation/sidebar/?syntax=tag)** is an expandable and collapsible component that typically acts as a side container to place primary or secondary content alongside the main content. We used **Sidebar** to represent user stories in the play area. It has mobile-friendly support, so when opening the site in mobile, the user stories area will be closed automatically. ![Sidebar collapsed view](https://blog.syncfusion.com/wp-content/uploads/2019/04/Sidebar-collapsed.png)*Sidebar collapsed view* ![Sidebar expanded view](https://blog.syncfusion.com/wp-content/uploads/2019/04/Sidebar-expanded.png)*Sidebar expanded view* Syncfusion Sidebar key features: - Context: Initialize Sidebar in any HTML element except the body element. - Several types and positions. - Auto close: The Sidebar can be in an expanded or collapsed state only in certain resolutions. - Dock: By default, it supports the display of short notifications about the content in docked mode. ## Split Button The **[Split Button control](https://ej2.syncfusion.com/aspnetcore/documentation/split-button/getting-started-core.html?syntax=tag)** triggers a default action when its primary button is clicked, and toggles contextual overlays to display a list of action items when its drop-down button is clicked. The control can contain both text and images. We used Split Button in the Import Story options. We have multiple import story options simply represented in a split button. ![Split button to import stories](https://blog.syncfusion.com/wp-content/uploads/2019/04/Split-button.png)*Split button to import stories* Syncfusion Split Button key features: - Icons - Pop-up items - Accessibility ## Uploader The **[Uploader control](https://ej2.syncfusion.com/aspnetcore/documentation/uploader/getting-started-asp-core.html?syntax=tag)** is useful to upload images, documents, and other files to a server. This component is an extended version of HTML5 upload. It has multiple-file selection, auto upload, drag and drop, progress bar, preloading files, and validation. We used the **Uploader** in the Import Stories option in Excel and CSV file formats. Also, you can drag and drop the files to upload. ![Uploaded to upload files containing story details](https://blog.syncfusion.com/wp-content/uploads/2019/04/Uploader.png)*Uploaded to upload files containing story details* Syncfusion Uploader key features: - [Asynchronous upload](https://ej2.syncfusion.com/aspnetcore/documentation/uploader/asynchronous.html) : The Uploader component allows you to upload files in an asynchronous way. - [Drag and drop](https://ej2.syncfusion.com/aspnetcore/documentation/uploader/draganddrop.html) : The files can be dragged from the file explorer into the drop area. By default, the Uploader control itself acts as a drop-area element. - [Form supports](https://ej2.syncfusion.com/aspnetcore/documentation/uploader/form-support.html) : The selected or dropped files are received as a collection in a when the form is submitted. - [Template](https://ej2.syncfusion.com/aspnetcore/documentation/uploader/template.html) : You can customize the default appearance of the Uploader using a template property along with a button property. ## Conclusion Syncfusion has powerful controls you can use to develop any kind of application on various platforms. They are designed to make developers’ lives easier. If you’re already a Syncfusion user, you can download the product setup [here](https://www.syncfusion.com/account/downloads/studio/) , or, you can download a free, 30-day trial [here](https://www.syncfusion.com/account/downloads/studio) to evaluate our products. Want to learn more about creating real time application using Syncfusion Essential JS 2? Don’t forget to check out the Showcase Applications [here](https://ej2.syncfusion.com/home/) . You can find this project in this [Github repository](https://github.com/syncfusion/ej2-showcase-aspnetcore-story-estimator) . If you have any questions on these features, please let us know in the comments below. You can also contact us through our [support forum](https://www.syncfusion.com/forums) or [Direct-Trac](https://www.syncfusion.com/support/directtrac/) or [Feedback portal](https://www.syncfusion.com/feedback/) . We are more than happy to assist you! *If you like this blog post, we think you’ll also like the following links* [Blog] [Single Page Application Examples using Essential JS 2 Components](https://blog.syncfusion.com/post/single-page-application-example-using-essential-js-2.aspx) [Ebook] [JavaScript Succinctly](https://www.syncfusion.com/ebooks/javascript) *[Ebook]*[AngularJS Succinctly](https://www.syncfusion.com/ebooks/angularjs) *[Ebook]*[ASP.NET Core Succinctly](https://www.syncfusion.com/ebooks/asp_net_core_succinctly)