Topics

All topics

Sitefinity renderers

Sample: Profile widget with custom fields
ASP.NET Core

This article contains
NEW TO SITEFINITY?

Overview

This sample demonstrates how to add your own custom fields to the default template of the Profile widget. You do this by modifying the Default.cshtml of the Profile widget 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 Profile widget in the following way:

  1. Open your project in Visual Studio.
  2. In folder Views/Shared/Components, create a new folder and name it SitefinityProfile
  3. In the context menu of folder SitefinityProfile, click Add » New Item…
  4. Name the file ProfileWithCustomFields.cshtml
  5. Paste the code in the template and build your solution

@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>
}
view raw ProfileWithCustomFields.cshtml hosted with ❤ by GitHub

Apply the CAPTCHA template

Perform the following:

  1. Open the page where the Profile widget is located for editing.
  2. In the page editor, hover over the Profile widget.
  3. Click the toggle menu in the widget label.
  4. Click Edit (Edit).
  5. In the Profile template dropdown box, select the new template.
  6. Save your changes.

Want to learn more?

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its 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 .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?