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 !!!!

Forms in DD4T MVC and SDL Tridion

How to create forms in DD4T MVC and SDL Tridion using Schema and components

Here we have used only two different schema to create forms.

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

o   Here i have field type ,field name and label text

o   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.

o   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”.
o   Insert this component as component presentation in your page .

In your DD4T application you can using following sample code lines to render the controls 

@if (FormBuilder.Fields.ContainsKey("title"))

  {

     @FormBuilder.Fields["title"].Value

   }

 @if (FormBuilder.Fields.ContainsKey("description"))

 {

   @FormBuilder.Fields["description"].Value

  }

First Read EmbeddedValues ["sections"] and then LinkedComponentValues

@foreach (var fieldComp in FormBuilder.Fields["fields"].LinkedComponentValues)

{

var fieldType = fieldComp.Fields.ContainsKey("type") ? fieldComp.Fields["type"].Keywords[0].Key : string.Empty;

//In our case it’s a text field

var fieldName = fieldComp.Fields.ContainsKey("name") ? fieldComp.Fields["name"].Value : string.Empty;

var fieldValue = (fieldComp.Fields.ContainsKey("label") && fieldComp.Fields["label"].EmbeddedValues[0].ContainsKey("text")) ? fieldComp.Fields["label"].EmbeddedValues[0][" text"].Values[0] : string.Empty;

<label for=\"{0}\">{1}</label> .FormatArgs(fieldname,fieldname)

//We are using Switch cases to check the field Type and generate control accordingly

switch (fieldType)

{

case "text":

<input type="text" name="@fieldName" />

Break;

case "button":

<button type="button">@fieldValue</button>

}

 }

Happy Coding and keep Sharing !!!!