News and Article Module In DXA

Why Fresh Content is Critical for Your Website?

1. Keep Your Audience Informed and Updated
2. Fresh Content Increases Your Authority Potential
3. More Content, More Keywords
4. Google Loves Frequent Updates

So, add an article, an image or just make some change on your site to get noticed. The easiest and most effective way to stay fresh is to add a blog on your site and continue to add articles that will get noticed by your viewers.

Today,We are going to discuss and create News and Article module in DXA which will have following features  .DXA Modules allows us to extend its Functionality via creating new modules. Here we can create new modules which gives us flexibility & re-usability.

1. Article searching
2. Tag based filtering 
3. Article list and detail articles 
4. Author details page 

Let's discuss the CMS part first.

CMS structure

1. Define module's folder structure
2. DXA gives us predefined structure where we can putting all the building blocks of the module.
3. For each new DXA module, we need to create a new folder in Modules Folder
4. The name of folder is usually module name.

Next is creating the Schema and Component Templates. I have used dynamic components which render on the landing page as a list of articles and with details page link.

You need to create dynamic CT for the list of articles

Dynamic Component Template

Publish all the Dynamic Article components .

Dynamic N&M Components

To read dynamic Components we need to query Broker DB.

Get Article Dynamic Components ID

Build Criteria based on you will get the data from Broker DB

Now ,Let's see the Content Delivery 

New Area called NewsAndArticle in DXA 

Create new area in you DXA web Application. Here i have created Models,and helper class to get the data from broker using Broker Queries.

Register your views in NewsAndArticleAreaRegistration.cs . Once done now let run the application .

1. News and Article Landing Page

Landing Page

Here you can see list of articles are rendering from Broker DB using broker query .Using this view we can search an article ,filter by category and view the author details.

2. Search will search in the intro Text in metadata.

Search result

3. Filter your result based on Tags click on tag.

Result based on tags

4. Click on read more link for Article Details page 

Article details page

5. Author Details Page .

Author page

Happy coding and keep sharing !!!!

FormBuilder Module in DXA Content Delivery Settings

My First DXA Module - Form builder Step by Step  cont'd

In Previous post, we have discussed on the CMS Part of the DXA module. now lets discuss the CDA part

Step 1. Download the DXA framework Here

Step 2. I have created new area called FormBuilder 

Step 3. Create a ViewModel based on FormBuilder Schema

Step 4. Lets create Login.CHTML View which will consume the FormBuilder ViewModel and render the userControl based on the formFields attached to it.

Last Step is to update the form FormBuilderAreaRegistration.cs

Build and run the solution .In below screen shot you can see the form is rendering.

We have completed the Formbuilder Module this is a very basic Formbuilder soon i will be adding more functionality like custom error message and data save/authentication functionality .

Happy Coding and Keep Sharing !!!! 

FormBuilder Module in DXA

My First DXA Module - Form builder Step by Step

In this we will discuss how to setup CMS to create your own DXA module

1. In this Post we will discuss how to setup DXA module in CMS
2. Next, we will be discussing CD level setting 

1. First we will define the folder structure 
2. Create a new folder in the Modules folder
3. Rename that folder to FormBuilder
4. Create Admin ,Site Manager and Editor

Let's create FormBuilder Schemas

      Form field Schema: - Is used to create the controls such as text box, radio button etc.

•     Here i have field type ,field name and label text
•     You can create field Type as category,Keywords to list down all the possible controls
• 
  
• 

Form Builder Schema: - Is used to give the title, Description and here we also linked all our components 
which was created using Schema Form Field.

•     In This component we will linked all are component created using Form Field  Schema which contains all the different types of fields type Components “First Name, Last Name”.
•           Insert this component as component presentation in your page .

This schema will be used by Editor to define the FormBuilder components with 

       required details and attached to page.

     

      Component Template:I have created a new CT (FormBuilder) to be attached with component of above schema 

      Next Step is to configure the DXA and create new area called FormBuilder Here

     Happy Coding and Keep Sharing !!!!