Role-Based UI

WorkApps apps receive the current user's role from sdk.getBootstrap(). Use it to conditionally show or hide editing controls so viewers see a read-only interface while editors and admins get the full UI.

Getting the Role

Always call getBootstrap() before rendering the UI:

1const bootstrap = await sdk.getBootstrap();2const { role } = bootstrap;3// role: 'viewer' | 'editor' | 'admin'45const canEdit = ['editor', 'admin'].includes(role);6const isAdmin = role === 'admin';

Hiding Controls from Viewers

1async function init() {2  const bootstrap = await sdk.getBootstrap();3  const canEdit = ['editor', 'admin'].includes(bootstrap.role);45  if (canEdit) {6    document.getElementById('create-btn').style.display = 'block';7  }89  loadRecords();10}

Alternatively, use CSS classes:

1if (!canEdit) {2  document.body.classList.add('readonly');3}

1.readonly .edit-controls { display: none; }

Inline Edit Controls

Show edit and delete buttons only for editors/admins:

1function renderRecord(record, canEdit) {2  return `3    <div class="record">4      <h3>${escapeHtml(record.title)}</h3>5      ${canEdit ? `6        <div class="actions">7          <button onclick="openEdit('${record.id}')">Edit</button>8          <button onclick="deleteRecord('${record.id}')">Delete</button>9        </div>10      ` : ''}11    </div>12  `;13}

Proactive Check Before Write

Even if the UI hides write controls for viewers, always handle AccessDenied errors gracefully in case the role changes mid-session:

1const { ErrorCode, WorkAppsSDKError } = WorkAppsSDK;23try {4  await sdk.createRecord('tasks', data);5} catch (error) {6  if (error instanceof WorkAppsSDKError && error.code === ErrorCode.AccessDenied) {7    showMessage('You do not have permission to create records.');8  }9}

Bootstrap Data

getBootstrap() returns more than just the role:

1const bootstrap = await sdk.getBootstrap();2// bootstrap.user   — { id, name, email }3// bootstrap.role   — 'viewer' | 'editor' | 'admin'4// bootstrap.app    — { id, name, type }5// bootstrap.limits — { maxPageSize, maxRecordCount, rateLimitPerMinute }

You can use bootstrap.user to personalize the UI or pre-fill the current user's email in a form.