Skip to main content
Corporate IdentityUniversity of Johannesburg
Settings
Appearance
Design
Menu

Forms

Profile information editor

Present the complete governed profile architecture across staff-authored narrative, structured records and official read-only data.

candidate@uj/design/componentsVersion 2.0.13Package 2.0.13draft

Production component

Live preview

This example is rendered from the same package consumed by UJ applications.

Staff-authored content

Profile information

Maintain a complete, role-aware profile without mixing personal narrative, verified records and authoritative institutional data.

Draft version 4All changes saved
Professor Thandi Ndlovu
Professor · Faculty of Science
Public identity

Choose the public-facing identity used on the staff profile. The legal and institutional identity remains unchanged.

Staff-authored public name

Required

The owning application enforces the selected audience.

Overview

Introduce your role and the contribution you make.

Required

The owning application enforces the selected audience.

Research

Use plain language. Publications and projects remain separate structured records.

Enter one concise highlight per line.

The owning application enforces the selected audience.

Teaching and supervision

Summarise teaching practice here; modules and supervision areas remain structured records.

The owning application enforces the selected audience.

Professional practice

Describe professional services, practice and the topics people may contact you about.

Separate topics with commas.

The owning application enforces the selected audience.

Leadership

Show this module only when leadership is part of the person's current role.

Enter one priority per line.

The owning application enforces the selected audience.

Media biography

Provide a concise approved biography for journalists, event organisers and public communications.

Keep this shorter than the main biography.

The owning application enforces the selected audience.

Structured profile records

Repeatable records keep provenance, verification and visibility independently of the narrative draft.

Manage records without flattening them

Expertise, contacts, availability, languages, qualifications, certifications, outputs and projects are separate records. Imported facts stay linked to their source; staff can select or supplement only where policy permits.

Controlled public discovery terms

Official institutional data

These values come from authoritative University systems and cannot be changed directly in the profile editor.

Verified institutional record

Request a correction if an official title, appointment or organizational relationship is inaccurate.

Source: verified institutional record

Source: verified institutional record

Source: verified institutional record

Source: verified institutional record

All changes saved. This draft is ready for review.

Contract

Usage and quality requirements

The contract keeps purpose, states and ownership visible before a component is reused.

usage

  • Use for the Staff-owned profile information workflow
  • Identify the selected person once inside the editor
  • Compose fields from UjField, UjFieldset, UjProfileEditorMedia and native UJ controls
  • Give every navigation item a matching fieldset id
  • Explain visibility once in guidance rather than repeating it for every control
  • Pass progress and status already calculated by the owning application
  • Keep authorization, validation, persistence and review transitions outside the component

states

  • default
  • with identity
  • with section navigation
  • with progress details
  • with status
  • with feedback
  • busy
  • dirty draft
  • saved draft
  • awaiting submission
  • validation failure
  • long content
  • narrow viewport
  • dark theme
  • forced colours
  • print

purpose

Provide one consistent, accessible editing shell for staff-authored profile information while the Staff application retains ownership of identity, permissions, validation, persistence, review and publication.

responsive

  • Desktop uses a sticky section rail and action dock
  • Section navigation and actions return to normal flow below the desktop breakpoint
  • Identity and media layouts stack at narrow widths
  • Actions wrap without horizontal page overflow
  • 320px
  • 768px
  • 1440px
  • 200% text resize

accessibility

  • Form is named by its visible heading
  • Section navigation targets native fieldsets
  • Section state is written as text and never conveyed by colour alone
  • Progress has an explicit accessible label
  • Busy state uses aria-busy
  • Status and feedback remain application-supplied semantic content
  • Action group remains keyboard operable
  • Logical heading and source order
  • WCAG 2.2 AA

runtime Boundary

The component performs no fetching, scrolling state, upload, validation, persistence, authorization, review transition, publication or completeness calculation.

source Authority

Staff profile workflow and Corporate Identity presentation contract