UpdateProfile

Last updated Sep 24th, 2021 | Page history | Improve this page | Report an issue

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

Budget

$301 per month—let's make that $500!

Learn more

What is UpdateProfile?¶

UpdateProfile is a simple Snippet that allows users who are logged in the in the front-end the ability to edit their profile.

Usage¶

To use the profile editing functionality, first create the Resource the user will go to to edit their profile. Then, add this snippet:

[[!UpdateProfile? &validate=`fullname:required,email:required:email`]]

UpdateProfile Properties¶

UpdateProfile comes with some default properties you can override. They are:

Name	Description	Default
submitVar	The name of the form submit button that triggers the submission.	login-updprof-btn
validate	A comma-separated list of fields to validate, with each field name as name:validator (eg: username:required,email:required). Validators can also be chained, like email:email:required. This property can be specified on multiple lines.
redirectToLogin	If true, will redirect non-logged-in users that visit the page with the snippet to the Unauthorized Page.	1
reloadOnSuccess	If true, the page will redirect to itself with a GET parameter to prevent double-postbacks. If false, it will simply set a success placeholder.	1
emailField	The field name for the email field in the form.	email
preHooks	A comma-separated list of 'hooks', or Snippets, that will be executed before the user's profile is updated but after validation. Also can specify 'captcha' as a hook.
postHooks	A comma-separated list of 'hooks', or Snippets, that will be executed after the user's profile is updated.
syncUsername	If set to a column name in the Profile, UpdateProfile will attempt to sync the username to this field after a successful save.
allowedFields	A comma-separated list of fields to allow when updating the user's profile. (Leave empty to allow all user profile fields to be updated.)
useExtended	Whether or not to set any extra fields in the form to the Profiles extended field. This can be useful for storing extra user fields.	1
allowedExtendedFields	A comma-separated list of extended fields to allow in the form, when useExtended is enabled. (Leave empty to allow any extra fields to be set.)
excludeExtended	A comma-separated list of fields to exclude from setting as extended fields.
placeholderPrefix	The prefix to use for all placeholders set by this snippet.

The UpdateProfile Form¶

Then, below this, add in the following HTML (removing any fields you'd like) to be the form. Feel free to style it and adjust the markup (just don't change the form field names). This is also found in core/components/login/chunks/lgnupdateprofile.chunk.tpl.

<div class="update-profile">
    <div class="updprof-error">[[+error.message]]</div>
    [[+login.update_success:is=`1`:then=`[[%login.profile_updated? &namespace=`login` &topic=`updateprofile`]]`]]

    <form class="form" action="[[~[[*id]]]]" method="post">
        <input type="hidden" name="nospam" value="" />

        <label for="fullname">[[!%login.fullname? &namespace=`login` &topic=`updateprofile`]]
            <span class="error">[[+error.fullname]]</span>
        </label>
        <input type="text" name="fullname" id="fullname" value="[[+fullname]]" />

        <label for="email">[[!%login.email]]
            <span class="error">[[+error.email]]</span>
        </label>
        <input type="text" name="email" id="email" value="[[+email]]" />

        <label for="phone">[[!%login.phone]]
            <span class="error">[[+error.phone]]</span>
        </label>
        <input type="text" name="phone" id="phone" value="[[+phone]]" />

        <label for="mobilephone">[[!%login.mobilephone]]
            <span class="error">[[+error.mobilephone]]</span>
        </label>
        <input type="text" name="mobilephone" id="mobilephone" value="[[+mobilephone]]" />

        <label for="fax">[[!%login.fax]]
            <span class="error">[[+error.fax]]</span>
        </label>
        <input type="text" name="fax" id="fax" value="[[+fax]]" />

        <label for="address">[[!%login.address]]
            <span class="error">[[+error.address]]</span>
        </label>
        <input type="text" name="address" id="address" value="[[+address]]" />

        <label for="country">[[!%login.country]]
            <span class="error">[[+error.country]]</span>
        </label>
        <input type="text" name="country" id="country" value="[[+country]]" />

        <label for="city">[[!%login.city]]
            <span class="error">[[+error.city]]</span>
        </label>
        <input type="text" name="city" id="city" value="[[+city]]" />

        <label for="state">[[!%login.state]]
            <span class="error">[[+error.state]]</span>
        </label>
        <input type="text" name="state" id="state" value="[[+state]]" />

        <label for="zip">[[!%login.zip]]
            <span class="error">[[+error.zip]]</span>
        </label>
        <input type="text" name="zip" id="zip" value="[[+zip]]" />

        <label for="website">[[!%login.website]]
            <span class="error">[[+error.website]]</span>
        </label>
        <input type="text" name="website" id="website" value="[[+website]]" />

        <br class="clear" />

        <div class="form-buttons">
            <input type="submit" name="login-updprof-btn" value="[[!%login.update_profile]]" />
        </div>
    </form>
</div>

UpdateProfile photo update¶

To update user's logo (avatar), you need to do two steps - add file upload field to HTML form and implement pre-hook snippet, how to do it you can find here: Profile logo update custom postHook example