Power Pages Client API: Building with $pages.webAPI and $pages.agent

Microsoft.Dynamic365.Portal.onPagesClientApiReady(($pages) => { ... });

let $pages = await Microsoft.Dynamic365.Portal.onPagesClientApiReady();

$pages.webAPI.retrieveMultipleRecords(entitySetName: string, options?: string): Promise<object>

let $pages = await Microsoft.Dynamic365.Portal.onPagesClientApiReady();
let books = await $pages.webAPI.retrieveMultipleRecords(
'adrbp_userbookstatuses', 
`$select=adrbp_name&
$expand=adrbp_Book($select=adrbp_name,adrbp_author,adrbp_bookimageurl)&
$filter=adrbp_status eq 000000000 and _adrbp_user_value eq ${userId}&
$top=3`);

let container = document.getElementById('books-list');
books.value.forEach((book) => {
    let card = document.createElement('div');
    card.className = 'book-card';
    card.innerHTML = cardInnerHTML(
      book.adrbp_Book.adrbp_bookimageurl, 
      book.adrbp_Book.adrbp_name, 
      book.adrbp_Book.adrbp_author
    );
    container.appendChild(card);
});
function cardInnerHTML(imageUrl, title, author) {  
    return `<img src="${imageUrl}" alt="${title}" class="book-card-image">  
                <div class="book-card-details">  
                <span class="book-card-title">${title}</span>  
                <span class="book-card-author">${author}</span>  
            </div>`  
}

$pages.webAPI.createRecord(entitySetName: string, data: object): Promise<object>
// Returns: A Promise that resolves to the created record or operation result.

<form id="add-book-form" class="addbook-form" novalidate>
    <div class="form-group">
        <label for="book-title" class="form-label">
          Title 
          <span class="required">*</span>
        </label>
        <input type="text" id="book-title" class="form-input" required />
    </div>
    <!-- Author (required), Genre, Year, ISBN, Cover URL, Description -->
    <button type="submit" id="add-book-submit" class="btn-submit">Add Book</button>
</form>

let $pages = await Microsoft.Dynamic365.Portal.onPagesClientApiReady();

// --- Form setup ---
const form = document.getElementById('add-book-form');

// --- Genre dropdown (choice column values) ---
const genreSelect = document.getElementById('book-genre');
const GENRE_OPTIONS = [
    { value: 455810000, label: 'Fiction' },
    // ... other genres
];
genreSelect.innerHTML = '<option value="">Select a genre...</option>';
GENRE_OPTIONS.forEach(({ value, label }) => {
    const el = document.createElement('option');
    el.value = value;
    el.textContent = label;
    genreSelect.appendChild(el);
});

// --- Submit handler ---
form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const title = document.getElementById('book-title').value.trim();
    const author = document.getElementById('book-author').value.trim();
    if (!title || !author) {
        showMessage('Title and Author are required.', 'error');
        return;
    }

    const record = {
        adrbp_name: title,
        adrbp_author: author,
    };
    const genre = document.getElementById('book-genre').value.trim();
    if (genre) record.adrbp_genre = parseInt(genre);

    try {
        await $pages.webAPI.createRecord('adrbp_books', record);
        showMessage('Book added to the library!', 'success');
        form.reset();
    } catch (err) {
        showMessage('Failed to add book. Please try again.', 'error');
    }
});

$pages.agent.SendActivity(
    agentSchemaName: string,
    inputActivity: object,
    responseSubscriber: function,
    errorSubscriber: function
);

let $pages = await Microsoft.Dynamic365.Portal.onPagesClientApiReady();

const magicBtn = document.getElementById('magic-button');
const agentResponse = document.getElementById('agent-response');

magicBtn.addEventListener('click', () => {
    agentResponse.textContent = 'Finding your next read...';

    const inputActivity = { 
        text: 'recommend 3 books, return only the titles separated by commas' 
    };
    const responseSubscriber = (activity) => {
        if (activity.text) {
            const books = activity.text.split(',').map(b => b.trim()).filter(Boolean);
            agentResponse.innerHTML = books.map(b => `<p>${b}</p>`).join('');
        }
    };
    const errorSubscriber = (error) => {
        agentResponse.textContent = 'Something went wrong. Please try again.';
        console.error('Agent error:', error);
    };
    $pages.agent.SendActivity(
        'bibliotheca_agent', 
        inputActivity, 
        responseSubscriber, 
        errorSubscriber
    );
});