Category: Forms

Sitecore Forms: Redirecting to External URL

I came across a scenario where I need to redirect to a external url(thank you page) after form submission. It’s achievable using formSubmitContext’s RedirectUrl property on your Custom Submit Action.

Here is the code snippet – 

protected override bool Execute(string data, FormSubmitContext formSubmitContext)
		{
//Prepare model
//WebApi Call

//Redirect to external URL
var thankYouPageUrl = $"{HttpContext.Current.Request.Url?.Scheme}://{HttpContext.Current.Request.Url?.Host}/[thank-you-page-path]/";

formSubmitContext.RedirectUrl = $"{thankYouPageUrl}?id={add-any-querystring-if-needed}";
formSubmitContext.RedirectOnSuccess = true;              
return true;

}

Hope this helps someone. Happy Sitecoring!

0

Sitecore 9 Forms: The date range is invalid. Please select a date range that is within the range of the list.

I deployed the forms to Staging environment and see how the forms were performing.

I exported the data using Export form data into CSV button and i received ‘The date range is invalid. Please select a date range that is within the range of the list.‘ error.

I tried different range and it threw the same error. I checked the db([project]. ExperienceForms) and there was NO DATA!

I submitted the form and tried again. It downloaded the CSV file with an entry on it.

Hope this helps someone. 

Happy Sitecoring.

0

Sitecore 9 Forms: Access landing page fields in FormSubmitContext?

I came across a scenario where I needed to access landing page fields(the page where we add Forms) in Custom Submit Action’s FormSubmitContext. 

By default, the page item isn’t known at the Submit Action. So started thinking should i create a custom hidden field or use the Forms Extensions module? At the end of the day, i didn’t need either. 

Here is the quick way to access the current page using HttpContext’s AbsolutePath.

protected override bool Execute(string data, FormSubmitContext formSubmitContext)
{
 
var contextItem = GetContextItem.GetItem(HttpContext.Current.Request.UrlReferrer?.AbsolutePath) as ILandingPageContentItem;

// Access fields from ContextItem
}

public class GetContextItem
{
	public static IStandardTemplateItem GetItem(string path)
	{
		Item item = Sitecore.Context.Database.GetItem($"/sitecore/content/<tenant>/Home{path}");
		
		return item?.AsStronglyTyped();
	}
}

Hope this helps someone. Any questions, please leave a comment.

Happy Sitecoring!

0

Sitecore 9 Forms: Custom Control – Conditional Section

I came across a scenario to implement Conditional Section for Sitecore 9.0 to hide/show fields based on user input. This feature was introduced on Sitecore 9.1(Checkout my other blog here). Since the project is in Sitecore 9.0, I decided to create a custom control using speak. 

Let’s get started.

Step 1: Create form element in core DB using speak

  • Switch to Core DB
  • Go to /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings
  • Create a template based of Form Parameters. (I couldn’t find it when i tried from Insert Template, so i duplicated the existed one- MutliLine Text. If you know, how to add Form Parameters template(not using Sitecore Rocks), please leave a comment.)

 

  • Add the FormTextBox Parameters template. Since I duplicated MultiLine Text field, it came with the Details, Validation, Styling and Advanced. I feel it’s best shortcut to create quick.
  • Fill out FormLabel, IsLableOnTop and BindingConfiguration fields. 
  • Repeat the fields as many as you need. Here i added one more to compare the value.
  • NOTE: IsLabelOnTop is unchecked for additional fields

Step 2: Create form template in Master DB

  • On Master DB, create a custom template under Basic/Lists/Security/Structure folders based on Field Type template(/sitecore/templates/System/Forms/Field Type). I created under Structure Section as it’s Condition Section.
  • Fill out Property Editor field by choosing the custom control that was created in Core DB. You can see all the fields listed shown in below screen shot. 
  • Fields(View Path, Model Type)will be filled out after creating code behind and razor view files.

Step 3: Create model and view in Visual Studio

  • Create model and view in project under Helix structure
    public class ConditionalViewModel : FieldViewModel
    {
        public string TargetField { get; set; }
        public string TrueValue { get; set; }

        protected override void InitItemProperties(Item item)
        {
            base.InitItemProperties(item);

            TargetField = StringUtil.GetString(item.Fields["Target Field"]);
            TrueValue = StringUtil.GetString(item.Fields["Show Value"]);
        }

        protected override void UpdateItemFields(Item item)
        {
            base.UpdateItemFields(item);

            item.Fields["Target Field"]?.SetValue(TargetField, true);
            item.Fields["Show Value"]?.SetValue(TrueValue, true);
        }
    }
@using Sitecore.ExperienceForms.Models
@using Sitecore.ExperienceForms.Mvc.Html
@using Sitecore.Mvc
@model  Sitecore.Project.Example.Views.CustomControl.ConditionalViewModel

@{
    var viewModel = Model is IViewModel vModel ? vModel : null;
}

<div @(Sitecore.Context.Request.QueryString["sc_formmode"] != null ? "" : "hidden") class="@Model.CssClass cond-@Model.targetField-@Model.trueValue">
    @Html.RenderFields(viewModel)
</div>

@if (Sitecore.Context.Request.QueryString["sc_formmode"] == null)
    {
        <script type="text/javascript">
            const condArr = [];

            function initConditional() {
                const conditionals = document.querySelectorAll('[class*="cond-"');
                conditionals.forEach((e) => {
                    e.className.split(" ").forEach((c) => {
                        if (c.includes('cond-')) {
                            condArr.push(parseClassName(c));
                        }
                    });
                });
                condArr.forEach((cond) => {
                    const element = document.getElementsByClassName(cond.field_name)[0];
                    element.setAttribute("data-cond", cond.field_name);
                    element.onchange = () => {
                        conditionalChange(element, condArr);
                    }
                });
            }

            function conditionalChange(element, condArr) {
                condArr.forEach((cond) => {
                    if (cond.field_name === element.getAttribute("data-cond")) {
                        if (cond.value === element.value) {
                            document.getElementsByClassName(cond.class)[0].removeAttribute("hidden");
                        } else {
                            document.getElementsByClassName(cond.class)[0].setAttribute("hidden", "true");
                        }
                    }
                })
            }

            function parseClassName(class_name) {
                const arr = class_name.split("-");
                if (arr.length < 3) {
                    console.log(`Malformed className: ${class_name}`);
                } else {
                    const obj = {
                        class: class_name,
                        field_name: arr[1],
                        value: arr[2]
                    }
                    return obj;
                }
            }

            initConditional();
        </script>

Step 4: Update the template fields

Now you should see the new form control on the elements panel. Drag and Drop to any form and fill out the Target Field and True Value fields appropriately and put any element(s) inside Conditional Section to show/hide the element(s).

Don’t forget to publish all the templates and forms!

Happy Sitecoring! Leave a comment if you have any questions.

0