Sample: Profile widget with custom fields
Overview
This sample demonstrates how to add your own custom fields to the default template of the Profilewidget. You do this by modifying the Default.cshtml of the Profilewidget and then apply the new template to the widget.
For more information, see Profile widget.
Supported field types
For the Profile widget, Sitefinity supports the following field types:
- Short text
- Long text
- Yes / No
- Date and Time
- Number
Create the custom widget template
Create a custom template for the Profilewidget in the following way:
- Open your project in Visual Studio.
- In folder
Views/Shared/Components, create a new folder and name itSitefinityProfile - In the context menu of folder
SitefinityProfile, click Add » New Item… - Name the file
ProfileWithCustomFields.cshtml - Paste the code in the template and build your solution
HTML+Razor
@model Progress.Sitefinity.AspNetCore.Widgets.Models.Profile.ProfileViewModel
@using Progress.Sitefinity.AspNetCore.Mvc.Rendering
@using Progress.Sitefinity.AspNetCore.Web
@using Progress.Sitefinity.AspNetCore.Widgets.Models.Profile;
@inject IRenderContext renderContext;
@{
var lbls = Model.Labels;
}
@if (this.User?.Identity?.IsAuthenticated ?? false)
{
<environment include="Development">
<script src="Scripts/LoginWidgets/profile.js" section-name="Bottom" assembly-ref="Progress.Sitefinity.AspNetCore.Widgets"></script>
</environment>
<environment exclude="Development">
<script src="Scripts/LoginWidgets/profile.min.js" section-name="Bottom" assembly-ref="Progress.Sitefinity.AspNetCore.Widgets"></script>
</environment>
<div data-sf-role="profile-container"
data-sf-visibility-hidden="@Model.VisibilityClasses[Progress.Sitefinity.AspNetCore.Configuration.VisibilityStyle.Hidden]"
data-sf-invalid="@Model.InvalidClass"
class="@(string.IsNullOrEmpty(Model.CssClass) ? null : Model.CssClass)" @Html.BuildAttributes(Model.Attributes)>
<input type="hidden" name="ViewMode" value="@Model.ViewMode" />
<div data-sf-role="read-container" class="d-flex @((Model.ViewMode == ProfileViewMode.Read || Model.ViewMode == ProfileViewMode.ReadEdit) ? "" : "d-none")">
<div class="flex-shrink-0">
<img src="@Model.AvatarUrl" width="100" />
</div>
<div class="flex-grow-1 ms-2">
<h2 class="mb-0">@Model.FirstName @Model.LastName</h2>
<p class="text-muted mb-3">@Model.Email</p>
@if (Model.ViewMode == ProfileViewMode.ReadEdit)
{
<a href="javascript:void(0)" data-sf-role="editProfileLink">@lbls.EditProfileLink</a>
}
</div>
</div>
@if (Model.ViewMode == ProfileViewMode.Edit || Model.ViewMode == ProfileViewMode.ReadEdit)
{
bool disabled = !@renderContext.IsLive;
var firstNameInputId = Html.GetUniqueId("sf-first-name-");
var lastNameInputId = Html.GetUniqueId("sf-last-name-");
var emailInputId = Html.GetUniqueId("sf-email-");
var nicknameInputId = Html.GetUniqueId("sf-nickname-");
var aboutInputId = Html.GetUniqueId("sf-about-");
var passwordInputId = Html.GetUniqueId("sf-password-");
var fileUploadInputId = Html.GetUniqueId("sf-file-upload-");
<div data-sf-role="form-container" class="@(Model.ViewMode == ProfileViewMode.Edit ? "" : "d-none")">
<div data-sf-role="error-message-container" class="alert alert-danger d-none my-3" role="alert" aria-live="assertive"></div>
<div data-sf-role="success-message-container"
class="alert alert-success my-3 d-none"
role="alert" aria-live="assertive">
@lbls.SuccessNotification
</div>
<div class="mb-3">
<h2>
@lbls.EditProfileHeader
</h2>
</div>
<form method="post" action="@Model.UpdateProfileHandlerPath" role="form">
<div data-sf-role="edit-profile-container">
<div class="d-flex">
<div class="mb-3">
<img data-sf-role="sf-user-profile-avatar" src="@Model.AvatarUrl" alt="@Model.Email" width="100" />
</div>
<div class="mx-3">
<a href="#" class="link-primary">
<label for="@fileUploadInputId">@lbls.ChangePhotoLabel</label>
</a>
<input type="file" id="@fileUploadInputId" data-sf-role="edit-profile-upload-picture-input" name="UploadImage" style="display: none;" accept=".jpg, .jpeg, .png" />
</div>
</div>
<div class="mb-3">
<label for="@firstNameInputId" class="form-label">@lbls.FirstNameLabel</label>
<input id="@firstNameInputId" type="text" class="form-control" @{
if (!Model.ReadOnlyFields.Contains("FirstName"))
{
<text>data-sf-role='required'</text>
}
else
{
<text>disabled</text>
}
} name="FirstName" value="@Model.FirstName"/>
</div>
<div class="mb-3">
<label for="@lastNameInputId" class="form-label">@lbls.LastNameLabel</label>
<input id="@lastNameInputId" type="text" class="form-control" @{
if (!Model.ReadOnlyFields.Contains("LastName"))
{
<text>data-sf-role='required'</text>
}
else
{
<text>disabled</text>
}
} name="LastName" value="@Model.LastName" />
</div>
<div class="mb-3">
<label for="@emailInputId" class="form-label">@lbls.EmailLabel</label>
<input id="@emailInputId" type="text" class="form-control" @{
if (!Model.ReadOnlyFields.Contains("Email"))
{
<text>data-sf-role='required'</text>
}
else
{
<text>disabled</text>
}
} name="Email" value="@Model.Email" />
</div>
<div class="mb-3">
<label for="@nicknameInputId" class="form-label">@lbls.NicknameLabel</label>
<input id="@nicknameInputId" type="text" class="form-control" name="Nickname" value="@Model.Nickname" @{
if (Model.ReadOnlyFields.Contains("Email"))
{
<text>disabled</text>
}
} />
</div>
<div class="mb-3">
<label for="@aboutInputId" class="form-label">@lbls.AboutLabel</label>
<textarea id="@aboutInputId" class="form-control" name="About" disabled=@Model.ReadOnlyFields.Contains("About")>@Model.About</textarea>
</div>
@* Custom fields start *@
@foreach (var customField in Model.CustomFields)
{
<div class="mb-3">
<label for="@customField.Key" class="form-label">@customField.Key</label>
<input id="@customField.Key" type="text" class="form-control" name="@customField.Key" value="@customField.Value" disabled=@Model.ReadOnlyFields.Contains(customField.Key) />
</div>
}
@* Custom fields end *@
</div>
<div data-sf-role="password-container" class="d-none">
<div class="mb-3">
@lbls.ChangeEmailLabel
</div>
<div class="mb-3">
<label for="@passwordInputId" class="form-label">@lbls.PasswordLabel</label>
<input id="@passwordInputId" type="password" class="form-control" name="Password" />
</div>
</div>
<input class="btn btn-primary w-100" type="submit" value="@lbls.SaveChangesLabel" disabled="@disabled" />
<input type="hidden" name="Id" value="@Model.Id" />
<input type="hidden" value="" name="sf_antiforgery" />
</form>
@if (Model.ViewMode == ProfileViewMode.Edit)
{
<input type="hidden" name="PostUpdateAction" value="@Model.EditModeAction" />
<input type="hidden" name="RedirectUrl" value="@Model.EditModeRedirectUrl" />
}
@if (Model.ViewMode == ProfileViewMode.ReadEdit)
{
<input type="hidden" name="PostUpdateAction" value="@Model.ReadEditModeAction" />
<input type="hidden" name="RedirectUrl" value="@Model.ReadEditModeRedirectUrl" />
}
<input type="hidden" name="InitialEmail" value="@Model.Email" />
<input type="hidden" name="ValidationRequiredMessage" value="@lbls.ValidationRequiredMessage" />
<input type="hidden" name="InvalidEmailErrorMessage" value="@lbls.InvalidEmailErrorMessage" />
<input type="hidden" name="InvalidPhotoErrorMessage" value="@lbls.InvalidPhotoErrorMessage" />
<input type="hidden" name="InvalidPasswordErrorMessage" value="@lbls.InvalidPasswordErrorMessage" />
</div>
}
</div>
}Apply the CAPTCHA template
Perform the following:
- Open the page where the Profilewidget is located for editing.
- In the page editor, hover over the Profile widget.
- Click the toggle menu in the widget label.
- Click
(Edit). - In the Profile template dropdown box, select the new template.
- Save your changes.
Want to learn more?
Enhance your Sitefinity skills by enrolling in free training sessions. Become Sitefinity certified through Progress Education Community to strengthen your professional credentials.
Get started with Integration Hub | Sitefinity Cloud
This free lesson teaches administrators, marketers, and other business professionals how to use Sitefinity Integration Hub to create automated workflows between Sitefinity and other business systems.
Web Security for Sitefinity Administrators
This free lesson teaches administrators the basics about protecting your Sitefinity instance and your sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.
Foundations of Sitefinity ASP.NET Core Development
The free on-demand video course teaches developers how to use Sitefinity ASP.NET Core and take advantage of its decoupled architecture and modern development model.