Change Log

  • 05-Apr-2023 | v6.9.0 | All new article

Contributors:

Adam Wilson - Logo Pogo

member_update_form

This component renders a contact update form for a specified CRM contact so that a CRM Admin role, who is logged in to the front-end, can update the specified contact’s CRM info or secure zone subscriptions.

This is useful when creating front-end functionality intended for website administrator use when editing CRM contact information is required.

{% component type: "member_update_form" %}

This component is only used for logged in members with the CRM Admin User Role assigned.

Due to GDPR and privacy regulations CRM contact records will only be output by this component if the "Allow listing my contact data in the CMS" option has been enabled in the users CRM record. This option can only be checked by the user during the submission of the "Update Account Form" or a web Form with the "Allow listing my contact data in the CMS" field added to it.

Parameters and Options

Parameter
Values
Required
Description
type
member_update_form

This is the name of the entity that needs to be used for the component retrieving function.

layout
<path/to/layout>

Path to file that will contain the Liquid layout content to be parsed.

If an empty string, nothing will be rendered.
If paramater is not included, the default virtual layout will be rendered (see below).

source
subscriptions
info
subscriptions Renders a form that allows updates to the contact's secure zone subscriptions.
info Renders a form that allows updates to the contact's general CRM info.

If an empty string or not included, no data or layout will be returned.

userId
<ContactID>
The ID of the CRM Contact to be updated

If an empty string or not included, no data or layout will be returned.

collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

Liquid Output

The below example is the default structure you will get from this Component (with source subscriptions added to the component to output the secure zone subscription status).

{
  "Member": {
    "Id": 1442,
    "Email": "alextest@test.com",
    "FirstName": "Alex",
    "LastName": "Smith",
    "Address": null,
    "City": null,
    "State": null,
    "ZipCode": null,
    "Country": null,
    "BillingAddress": null,
    "BillingCity": null,
    "BillingState": null,
    "BillingZipCode": null,
    "BillingCountry": null,
    "Site": null,
    "Phone": null,
    "Status": null,
    "Notes": null,
    "Type": "Consumer",
    "IsDataUsingAllowed": false,
    "CreatedDateTime": "2022-12-17T02:48:22.582557",
    "UpdatedDateTime": "2022-12-17T02:48:22.588027",
    "CrmType": "Member",
    "IsEmailVerified": true,
    "SecureZones": [
      {
        "Name": "Member Zone",
        "LandingPageId": 1971,
        "CreatedDateTime": "0001-01-01T00:00:00",
        "UpdatedDateTime": "0001-01-01T00:00:00",
        "ExpiryDateTime": "9999-01-01T00:00:00",
        "Id": "14198",
        "IsSubscribed": true
      },
      {
        "Name": "Premium Zone",
        "LandingPageId": 2075,
        "CreatedDateTime": "0001-01-01T00:00:00",
        "UpdatedDateTime": "0001-01-01T00:00:00",
        "ExpiryDateTime": "9999-01-01T00:00:00",
        "Id": "12989",
        "IsSubscribed": false
      }
    ]
  }
}

Virtual Layout

info source

When not using any custom layout and with the source parameter set to info, the system layout will output a contact update form with the default system fields, eg:

If your site uses Advanced CRM Group fields to extend the CRM Contact info, you can add those fields to this form as well - which you can find the syntax for in the Advanced CRM Group documentation.

<form action="/forms/members/update-member.ashx" method="POST" enctype="multipart/form-data"> 
   <input type="hidden" name="userid" value="{{this.member.id}}"/>  
   <label for="email">Email</label>  
   <input type="text" name="email" value="{{this.member.email}}"/>  
   <label for="firstName">First name</label>  
   <input type="text" name="firstName" value="{{this.member.FirstName}}"/>  
   <label for="lastName">Last name</label>  
   <input type="text" name="lastName" value="{{this.member.LastName}}"/>  
   <label for="country">Country</label>  
   <input type="text" name="country" value="{{this.member.Country}}"/>  
   <label for="state">State</label>  
   <input type="text" name="state" value="{{this.member.State}}"/>  
   <label for="city">City</label>  
   <input type="text" name="city" value="{{this.member.City}}"/>  
   <label for="address">Address</label>  
   <input type="text" name="address" value="{{this.member.Address}}"/>  
   <label for="zipCode">ZipCode</label>  
   <input type="text" name="zipCode" value="{{this.member.ZipCode}}"/>
   <label for="Payment_BillingCountry">Billing Country</label>
   {% component type:"countries", collectionVariable:"Payment_BillingCountryList", layout:"" %}
   <select id="MemberAccountForm_Payment_BillingCountry" name="Payment_BillingCountry">
   <option value="">Please Select</option>
   {% for country in Payment_BillingCountryList.items %}
   <option value="{{country.Code}}">{{country.DisplayName}}</option>
   {% endfor %}
   </select>
   <label for="Payment_BillingState">Billing State</label>
   <input type="text" name="Payment_BillingState" value="{{this.member.BillingState}}">    
   <label for="Payment_BillingCity">Billing City</label>
   <input type="text" name="Payment_BillingCity" value="{{this.member.BillingCity}}">
   <label for="Payment_BillingAddress">Billing Address</label>
   <input type="text" name="Payment_BillingAddress" value="{{this.member.BillingAddress}}">
   <label for="Payment_BillingZipCode">Billing ZIPCode</label>
   <input type="text" name="Payment_BillingZipCode" value="{{this.member.BillingZipCode}}">
   <label for="phone">Phone</label>  
   <input type="text" name="phone" value="{{this.member.Phone}}"/>  
   <label for="site">Site</label>  
   <input type="text" name="site" value="{{this.member.Site}}"/>  
   <label for="status">Status</label>  
   <input type="text" name="status"  value="{{this.member.Status}}"/>  
   <label for="notes">Notes</label>  
   <input type="text" name="notes"  value="{{this.member.Notes}}"/>
   <label for="password">Password</label>  
   <input type="password" name="password">
   
   <script>
    (function() {
        var inputs = document.getElementById('MemberAccountForm_Payment_BillingCountry');
        if (inputs) {
            var value = '{{this.member.BillingCountry}}';
            var inputsCount = inputs.length;
            for (var i = 0; i < inputs.length; i++) {                            
                    if (value == (inputs.options[i].value)) {
                        inputs.options[i].selected = true;                        
                        break;                    
                }
            }
        }
    })();
    </script>  
   <input type="submit" value="Save">  
</form>

subscription source

When not using any custom layout and with the source parameter set to subscriptions, the system layout will output a contact update form with all the available secure zone fields (with currently subscribed zones checked), eg:

<form action="/forms/members/update-subscriptions.ashx" method="POST" enctype="multipart/form-data">  
   <input type="hidden" name="userId" value="{{this.member.id}}"/>  
    {% for zone in this.member.securezones %}   
        <input type="hidden" name="SecureZone[{{zone.id}}][id]" value="{{zone.id}}"/>  
        <input id="SecureZoneSubscribed_{{zone.id}}" type="checkbox" name="SecureZone[{{zone.id}}][isSubscribed]" value="true" {% if zone.isSubscribed == true %}checked="checked"{% endif %} />
        <label for="SecureZoneSubscribed_{{zone.id}}">{{zone.name}}</label>
        <label for="SecureZoneExpireDate_{{zone.id}}">Expiry Date</label>
        <input id="SecureZoneExpireDate_{{zone.id}}" type="datetime-local" name="SecureZone[{{zone.id}}][expiryDateTime]" value="{{zone.expiryDateTime | date: '%Y-%m-%dT%H:%M'}}">
   {% endfor %}
   <input type="submit" value="Save">  
</form>

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

This data is also accessible directly on the Page or Template via a Liquid Collection by adding collectionVariable to the Component.

An example using collectionVariable with value "memberData":

{% component type: ... collectionVariable: "memberData" %}

Accessing the member item within the collection we could render a specific value, such as the member's last name: Smith

{{memberData.Member.['LastName']}}