Working with profiles

Profiles created within the nuEvolution ecosystem always have a unique id. This ID is used for loading and updating profiles.

Alternatively, you can use your own identifier.

The id can be managed through the corresponding attribute profile-id or via the property profileId.

Loading an existing profile

To load an existing profile, pass the profile ID to the profile-id attribute. By default, the editor treats this as a nuEvolution internal ID.

If you want to load a profile using your own external ID, you must also set the id-type attribute to external.

Internal IDExternal IDTypeScript

html

<nu-evolution-editor token="your-access-token" profile-id="123"></nu-evolution-editor>

html

<nu-evolution-editor token="your-access-token" profile-id="EXT-456" id-type="external"></nu-evolution-editor>

import type { NuEvolutionEditor } from '@nuitdev/evo-embedded'

const editor = document.querySelector<NuEvolutionEditor>('nu-evolution-editor')
if (editor) {
    // Loading by internal ID
    editor.profileId = '123'
    editor.idType = 'default'

    // Loading by external ID
    // editor.profileId = 'EXT-456'
    // editor.idType = 'external'
}

Interactive Example: Loading and Saving

The following example allows you to test loading profiles by ID and Type. You can also trigger a save operation and see the returned data.

Profile ID

Capabilities

Save Profile

Catalog Open

Catalog Save

Token

You don't have a token yet? Contact Sales

Saving a profile (Upsert)

Saving a profile works as an upsert:

If a profile-id is set (and valid), the editor updates that existing profile.
If no profile-id is set, a new profile is created and saved.

There are two ways to trigger a save operation:

1. Save initiated by the Editor

By enabling the save-profile capability, a save button is added to the editor toolbar. When clicked, the nuit::profile-saved event is emitted.

editor.capabilities = [Capability.SAVE_PROFILE]
editor.addEventListener('nuit::profile-saved', (event) => {
    console.log('Profile saved:', event.detail)
})

2. Save initiated by the Host Page

You can trigger a save programmatically by calling the saveProfile() method. This returns a promise with the saved profile data.

const profileData = await editor.saveProfile()
console.log('Saved ID:', profileData.id)

By default, saveProfile() does not trigger the nuit::profile-saved event. Pass true as an argument to enable the event: saveProfile(true).

Working with profiles ​

Loading an existing profile ​

Interactive Example: Loading and Saving ​

Saving a profile (Upsert) ​