What is the best way to have a read only field in Xforms?

Vote:
 

I'm not sure how to go about this. I have been asked to create a form that will pull data and lock the field. For example, they want a form that pulls the Username and Email text fields. Both of those fields will be read only. Then there are also other text fields that are editable for Name, Company, (checkbox) I acknowledge terms, etc. This would all be in one form (see below). I have no idea where to start. I did think about using the Controls_Created method to add an attribute to set the input fields as readonly, but I don't want to make that global in the global.asax.cs file.

Acknowledgement Form:

Username  [__________] - to be read only and displays currently logged in username
Email         [__________] - to be read only and displays currently logged in username's email
Company   [__________] - editable field
Name        [__________] - editable field

[_] I acknowledge something. - Checkbox

[Submit]

#39221
May 05, 2010 14:08
Vote:
 

Another question: How are the CSS classes being handled for the controls if you set a CSS class property using the Forms UI? Are they applied after creating the control, or while creating the control in Controls_Created method?

#39233
May 05, 2010 17:36
Vote:
 

Hi Christine,

You can use the FormControl.ControlsCreated event to do this.

Here is an example:

protected void FormControl_ControlsCreated(object sender, EventArgs e)
{
	// Get all xform values
	NameValueCollection formFields = FormControl.Data.GetValues();

	if (formFields.Count <= 0) return;
	foreach (string field in formFields)
	{
		// Set xform value
		FormControl.Data.SetValue(field, "ValueToSetInField");

		// Find control and set it to disabled if it should be disabled
		var control = FormControl.FindControl(field) as Input;
		if (control == null) continue;
		control.Attributes.Add("ReadOnly", "readonly");
		control.Attributes.Add("style", "background-color:#dddddd;");
	}
}

To answer your second question, I guess the css class is added while creating the control.

Hope this helps!

Br, Tore Gjerdrum

#39247
May 06, 2010 12:37
Vote:
 

Hi Christine!

One way you could make the disable functionality generic for the entire site is to define a css key to set the input field disabled. That way you could attach to the ControlsCreted event for all XForms being created on your site in your Global.asax.cs file and loop through all XForm controls. If the css file contains the magic key (perhaps "readonly") then you can add a disabled="disabled" attribute to the control which in turn will be rendered to the client.

Regards
Linus Ekström
EPiServer Development Team

#39248
May 06, 2010 13:17
Vote:
 

Linus,

This was the idea I was going for and that is why I asked when the css class gets applied. It looks as if the css class is actually applied via javascript after the control is created. I have tried finding the control with css class="readonly" in the FormControl_ControlsCreated method, but because the style is added after, it doesn't work when looking in this method.

Thanks for the response also Tore. I'm still working on a solution and will let you know if I come up with one.

Best,
Christine

#39537
May 19, 2010 18:25
Vote:
 

I've tried to edit the xformedit.js file in C:\Program Files\EPiServer\CMS\5.2.375.236\Application\UI\Javascript to look for a class called "disabled" and add disabled to the input tag. in the fieldCreateInput, I have an if statement, but it looks like this modified file is never being used. I have reset IIS and cleared my cache. Is this the correct file I should be using? It looks like the right one where the value is being passed and it's creating the input tag and adding the css class that gets set in the Xform UI property dialog box.

function fieldCreateInput( sType, sName, sValue, sClass, sSize, bRequired, label, tooltip, type, horizontalAlign, bChecked)
{
    var s = createLabelField(label, sName);
    
    s = s + '<input ';
    
    
    
    s = s +' type="' + sType + '"';
    
    if(sType == "checkbox" || sType == "radio")
    {
        sValue=ParseOptionValueString(sValue,'"','&quot;');  
    }
    
    if (sName && sName.length > 0)
    {
        s = s + ' name="' + sName + '"';
    }
    if (sValue && sValue.length > 0)
    {
        s = s + " value=\""+sValue+"\"";
    }
    else
    {
        s = s + " value=\"\"";
    }
    
    if (sClass && sClass.length > 0)
    {
        if (sClass == "disabled")
        {
            s = s + ' class="' + sClass + '" disabled';
        }

        else
        {
            s = s + ' class="' + sClass + '"';
        }
    }

.... etc etc.

    if( (sType == "checkbox" || sType == "radio") && bChecked == "true" )
    {
        s = s + '  checked />';
    }
    else
    {
        s = s + ' />';
    }

    return s;
}

#39538
May 19, 2010 20:43
Vote:
 

Hi Christine!

You should be fine using the ControlsCreated event. Ive done someting similiar using CLASS="HIDDEN" to make some xformcontrols invisible:

xformControl.ControlsCreated += new EventHandler(xformControl_ControlsCreated);


protected void xformControl_ControlsCreated(object sender, EventArgs e)
{
  HackFixupXFormControls(xformControl);
}

protected void HackFixupXFormControls(Control parent)
{
  if(parent is XFormControlBase)
  {          
     XFormControlBase xformControl = parent as XFormControlBase;

     if(0==String.Compare(xformControl.Attributes["Class"], "HIDDEN", true))
     {
        xformControl.Visible = false;

        return;
     }
  }


  foreach(Control child in parent.Controls)
    HackFixupXFormControls(child);
}

/johan

#39540
Edited, May 19, 2010 21:30
Vote:
 

Thanks Johan! I didn't exactly use what you have but you gave me what I was missing. When I tried using controls_created before, I kept using:

if (control is Input)
{
   if (((Input)control).CssClass == "readonly")  -- or I did a variation of .Attributes.CssStyle == "readonly" which neither worked
   {
      ((Input)control).Attributes.Add("disabled", "disabled");
   }
}

 

Once I changed it to below it worked!!! This is what I have:

if (control is Input)
{
   if (((Input)control).Attributes["class"] == "readonly")
   {
      ((Input)control).Attributes.Add("disabled", "disabled");
   }
}

 

So final code is basically adding to the current Global,asax.cs file:

public void XForm_ControlsCreated(object sender, EventArgs e)
        {
            XFormControl formControl = (XFormControl)sender;

            //We set the inline error validation text to "*" as we use a
            //validation summary in the master page to display the detailed error message. Changed to use "xformerror" css class.
            foreach (Control control in formControl.Controls)
            {
                if (control is BaseValidator)
                {
                    //((BaseValidator)control).Text = "*";
                    ((BaseValidator)control).CssClass = "xformerror";
                    ((BaseValidator)control).Text = LanguageManager.Instance.Translate("/form/requiredfield");;
                }

                if (control is Input)
                {
                    if (((Input)control).Attributes["class"] == "readonly")
                    {
                        ((Input)control).Attributes.Add("disabled", "disabled");
                    }
                }

            }
            
            if (formControl.Page.User.Identity.IsAuthenticated)
            {
                formControl.Data.UserName = formControl.Page.User.Identity.Name;
            }
        }

#39543
May 19, 2010 22:07
Vote:
 

Thanks for all the replies. It works.

#39544
May 19, 2010 22:08
Vote:
 

I have another question - I am doing a data pull for my disabled fields. It pulls in Username and Email and displays it correctly on the ControlsCreated method. The problem is that it is being rendered in the <input> tag as a value, i.e. <input value="username" />. This value does not get passed into the form to be stored with the posted data. How would I be able to pass this value in as well?

#39576
May 21, 2010 17:15
Vote:
 

Hi Christine,

If you take a look at my example I set control.Attributes.Add("ReadOnly", "readonly"); This is because if you set the control to disabled the value will not be sent with the form.

Hope this helps!

Tore

 

#39579
May 21, 2010 17:59
Vote:
 

OH!!!! Ok - silly me. Thanks again. It works as readonly.

#39580
May 21, 2010 18:13
Vote:
 
#39685
May 27, 2010 15:47
Vote:
 

Hi,

 

Can any one know how to get the sytlesheet of xform? i know how to get the html of xform......but i want stylesheet of xform.

If anyone knows pls respond.

 

Thanks in advance.

 

Krishna

#56503
Jan 24, 2012 11:37
Vote:
 

The xform does not use a specific style sheet, it just follows the standard css rules applied in the site style sheets.

#56504
Jan 24, 2012 11:40
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.