Is it possible to populate Episerver.Forms field with data - episerver

I'm using Episerver 10 together with Episerver.Forms addon. I created a form which contains several fields. I wonder if there's an option to prepopulate those fields with data.
Example:
A field for email address. If user is logged in I want this field to has email from user profile set as a value.
I created my own custom field for email and I tried to use SetDefaultValues method but apparently it's meant for something different.
EDIT:
My Custom form field:
public class PostalCodeFormField : TextboxElementBlock
{
public override void SetDefaultValues(ContentType contentType)
{
base.SetDefaultValues(contentType);
base.PredefinedValue = "Hello world";
}
}
Template for that field:
#model My.Valid.Namespace.PostalCodeFormField
<div class="Form__Element FormTextbox" data-epiforms-element-name="#Model.FormElement.ElementName">
<label for="#Model.FormElement.Guid">
My label
</label>
<p>#Model.PredefinedValue</p>
<input type="text" name="#Model.FormElement.ElementName" class="FormTextbox__Input" id="#Model.FormElement.Guid" value="#Model.PredefinedValue" />
<span data-epiforms-linked-name="#Model.FormElement.ElementName" class="Form__Element__ValidationError" style="display: none;">*</span>
</div>
Thing is #Model.PredefinedValue is empty like SetDefaultValues was never called

If you don't want to create a custom element (but i think that is the best solution) you can change the view of the element. It should be located under: \modules \ _protected \ EPiServer.Forms \ Views \ ElementBlocks
For your email example i would change the TextboxElementBlock.ascx into something like this:
<%# import namespace="System.Web.Mvc" %>
<%# import namespace="EPiServer.Web.Mvc.Html" %>
<%# import namespace="EPiServer.Forms.Core.Models" %>
<%# import namespace="EPiServer.Forms.Helpers" %>
<%# import namespace="EPiServer.Forms.Implementation.Elements" %>
<%# Import Namespace="EPiServer.Personalization" %>
<%# control language="C#" inherits="ViewUserControl<TextboxElementBlock>" %>
<%
var formElement = Model.FormElement;
var labelText = Model.Label;
var isEmailField = formElement.Validators.Any(x => x is EPiServer.Forms.Implementation.Validation.EmailValidator);
var defaultValue = Model.GetDefaultValue();
if (isEmailField)
{
defaultValue = EPiServerProfile.Current.Email;
}
%>
<div class="Form__Element FormTextbox <%: Model.GetValidationCssClasses() %>" data-epiforms-element-name="<%: formElement.ElementName %>">
<label for="<%: formElement.Guid %>" class="Form__Element__Caption"><%: labelText %></label>
<input name="<%: formElement.ElementName %>" id="<%: formElement.Guid %>" type="text" class="FormTextbox__Input"
placeholder="<%: Model.PlaceHolder %>" value="<%: defaultValue %>" <%: Html.Raw(Model.AttributesString) %> />
<span data-epiforms-linked-name="<%: formElement.ElementName %>" class="Form__Element__ValidationError" style="display: none;">*</span>
<%= Model.RenderDataList() %>
</div>
Edit:
Didn't see you edit the question. Remove the "base" from base.PredefinedValue in SetDefaultValues and it should work.
public class PostalCodeFormField : TextboxElementBlock
{
public override void SetDefaultValues(ContentType contentType)
{
base.SetDefaultValues(contentType);
PredefinedValue = "Hello world";
}
}
For setting a "dynamic value you can add a new property to the class (getting current user email here):
public virtual string UserEmail => EPiServerProfile.Current != null ? EPiServerProfile.Current.Email : string.Empty;
And update the input in the view:
<input type="text" name="#Model.FormElement.ElementName" class="FormTextbox__Input" id="#Model.FormElement.Guid" value="#Model.UserEmail" />

It is, but not out of the box. We typically solve this by creating custom elements.
David Knipe wrote an excellent blog on this, https://www.david-tec.com/2016/01/building-out-a-custom-form-element-with-the-new-episerver-forms/
Check the form model
public override void SetDefaultValues(ContentType contentType)
{
base.SetDefaultValues(contentType);
// override
base.PredefinedValue = "Hello world";
}

The new Episerver Forms has Autofill API to help you do exactly that job.

Related

trigger an event to hosting WPF application from webbrowser control

I have a WPF usercontrol that hosts an ASP.Net MVC Application using the webbrowser control.
I would like to notify the usercontrol when a certain action is performed on the WebApplication.
What are the possible ways to achieve this?
As #Szabolcs Dézsi mentioned in the comment if you have the access to Web Application you can use WebBrowser.ObjectForScripting to instance of an object and call its method from javascript. Here is a simple demo:
[ComVisible(true)] // Class must be ComVisible
public class Demo
{
public void SayHello(string name) => MessageBox.Show($"Hello {name} !!!");
}
Create an instance of this class an assign it to ObjectForScripting property of the WebBrowser control:
webBrowser.ObjectForScripting = new Demo();
and say this simple html page that we display in the WebBrowser control:
<html>
<head>
<title></title>
<script>
function sayhello()
{
var name = document.getElementById('name').value;
// the window.external is assigned an instance of
// class we created above.
// We can call C# instance method SayHello directly.
window.external.SayHello(name);
}
</script>
</head>
<body>
<form action="#" method="post">
<input id="name" type="text" name="name" value="" />
<input type="submit" name="submit" value="Say Hello" onclick="sayhello()" />
</form>
</body>
</html>
Now whenever you fill a name and click SayHello button it will display MessageBox as expected.
Also you have the property WebBrowser.Document which an instance of HtmlDocument that lives in Microsoft HTML Object Library (MSHTML) Com Library, make sure to reference it in your project.
The Document property allows you query the DOM object of the current page and through it you can manipulate your html page like in javascript via Method exposed by HtmlDocument Class like HtmlDocument.getElementById() and many others.
for example this code modify the value attribute of name input from above html page after page is loaded by WebBrowser control:
webBrowser.LoadCompleted += new LoadCompletedEventHandler((o, e) =>
{
if (webBrowser.Document is HTMLDocument DOM)
{
var namefield = DOM.getElementById("name");
namefield.setAttribute("value", "Enter your name!!!");
}
});
Hope this helps you to understand the power that WebBrowser control provides to manipulate loaded pages.

How to mark the simple_form checkbox based on a Array object?

The Rails view has two parameters
list_of_attributes = ["a1", "a2", "a3", "a4"]
user_selections = ["a2", "a4"]
I am able to display the appropriate checkboxes and any associated user selections using the following simple_form definition
<% list_of_attributes.each do |item| %>
<label>
<%= check_box_tag "user_selections[]", item, user_selections.include?(item) %>
<%= item %>
</label>
<% end %>
How can I define the above behavior using simple_form f.input syntax? With the following definition, I am able to display the appropriate checkboxes, but any user selections is not 'checked'.
<%= f.input key, as: :check_boxes, collection: list_of_attributes,
:label => key, class: "form-control" %>
Thanks for your help.
Adding checked attribute got the f.input definition functional.
<%= f.input key, as: :check_boxes,
collection: list_of_attributes,
:label => key,
checked: user_selections,
class: "form-control" %>
<% end %>
Try this. This worked for me using bootstrap CSS. Check line 25 in my github repo here
<div class="form-group">
<div class="row">
<div class="col-sm-offset-3 col-sm-8">
<%= f.collection_check_boxes :your_model_ids, Your_model.all, :id, :list_of_attributes do |cb| %>
<% cb.label(class: "checkbox-inline input_checkbox") {cb.check_box(class: "checkbox") + cb.text} %>
<% end %>
</div>
</div>
</div>
And then use this in your CSS file for the custom input_checkbox class above
.input_checkbox input {
width: auto !important;
}

How to add and validate google captche in dnn page

I have work on dnn 7.1 .I have add the Google catcha in DNN page.
see reference from this site
code for add captcha in asp.net
with the help of this reference i have add the captcha in dnn page. but in the captcha validation is not work. anything write in the text box. not show the error message. and form submit successfully . Any one help me what can i do for validation.
code are given below
<%--<%# Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %>--%>
<%# Control Language="C#" ClassName="Admin.ContactUs" Inherits="DotNetNuke.Entities.Modules.PortalModuleBase" %>
<%# Import Namespace="System" %>
<%# Import Namespace="System.Collections" %>
<%# Import Namespace="System.Configuration" %>
<%# Import Namespace="System.Data" %>
<script runat="server">
protected void btnSubmit_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
SendMailTest();
}
else
{
}
}
protected void Page_Load(object sender, EventArgs e)
{
}
</script>
<div class="contactusform-left commonclass lF">
<asp:Label ID="lblmsg" runat="server" Text=""></asp:Label>
/* Code for textbox, dropdowm */
</div>
<div class="contactusform-right commonclass lF">
<div class="contactusform-set-textarea contactusform-set" style="height:150px;">
<label class="lF">
Captcha <span>*</span></label>
<div style="clear:left;width:100%;height:100px;">
<recaptcha:RecaptchaControl ID="recaptcha" runat="server" PublicKey="6LdCxeYSAAAAAAP-uIGWnsZHeW7rn8rzeeblc5g"
PrivateKey="6LdCxeYSAAAAAFvnxCiaN_7vkHp-vaVRRYb9yVF" />
<asp:Label Visible=false ID="lblResult" runat="server" />
</div>
</div>
<div style="clear:both;"></div>
<div class="contactusform-set " style="margin-top:10px;">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"
ValidationGroup="ContactUsValidate" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" Style="color: #8D8D8D; cursor: pointer;
float: right; font-weight: bold; height: 34px; margin-right: 5px; text-transform: uppercase;
width: 120px;" />
</div>
</div>
Without sample code it will be very hard to give you a valid answer here, but the most common cause of it would be if you are using a "ValidationGroup" on the button or other controls, but not on the CAPTCHA.
Otherwise, we need to see your specific code.
Do you know that DotNetNuke provides the Telerik captcha control? You can use it exactly as described here: http://demos.telerik.com/aspnet-ajax/captcha/examples/overview/defaultcs.aspx but you just need to replace radCaptcha by dnnCaptcha in your code and add these two lines at the beginning of your file:
<%# Register TagPrefix="dnn" Namespace="DotNetNuke.UI.WebControls" Assembly="DotNetNuke" %>
<%# Register TagPrefix="dnn" Namespace="DotNetNuke.Web.UI.WebControls" Assembly="DotNetNuke.Web" %>

Backbone underscore sum value

I have an app in backbone and I want to know if is possible to sum inside a template value of the object.
For example I have this piece of template in underscore:
<% _.each(room1.combinations, function(room2) { %>
<div>
<div class="tot"><p>TOTAL:<span id="totale_<%= room2[0].attributes.id %>"></span></p>
</div>
<form method="POST" action="">
<% _.each(room2, function(room) { %>
<span><%= room.attributes.price %> EUR</span>
<% }); %>
<input type="button" class="submit-ricerca prenota-bt" name="buy" value="BUY">
</form>
</div>
<% }); %>
I want to put into the span with class total the sum of the price of each element inside it.
Is possible?
Thanks
Yes, it is possible. Just sum the prices (using reduce) and put them there:
<p>TOTAL:<span id="totale_<%= room2[0].attributes.id %>"><%=
_.reduce(room2, function(sum, room){return sum+room.attributes.price;}, 0)
%></span>

SilverStripe: Loop If Statement

I'm building a single page portfolio with SilverStripe.
So far I am able to loop through my sites and all $Title[s] and $Content[s] are visible in one <div>. Now I want to attach a certain CSS-class if the current page (which is looped) is named "Contact".
Something like:
//Pseudocode:
<loop start>
if ($Title == 'Contact') <div class="a"></div> else <div class="b"></div>
<loop end>
Does anybody know how to do this?
<% if $Title == "Contact" %>
// Do something ...
<% end_if %>
you could try a custom getter method such as :
function DivClassName() {
return $this->Title == 'Contact'?'a':'b';
}
and use the following in your template.
<div class="$DivClassName"></div>
keeps the logic out of your templates :)
<% if Title = "Contact" %>
<div class="a"></div>
<% else %>
<div class="b"></div>
<% end_if %>

Resources