Profile completion - Datanumia Developer Portal

Integration of the web component

This is a more technical section dedicated to developers. For a specific environment, use the correct base uri, specified in this section : Insert a webcomponent. Below is an example of implementation:

<html>
<head>
  <link href="https://new-front-intersi.qa.datanumia.com/socle/fr/styles.css"
        rel="stylesheet">
  <script src="https://new-front-intersi.qa.datanumia.com/socle/fr/polyfills.js"
          type="module"></script>
  <script src="https://new-front-intersi.qa.datanumia.com/socle/fr/main.js"
          type="module"></script>

  <!-- Please import the file that contains the radius override -->
  <link href="https://app.example.org/style.css" rel="stylesheet">
</head>
<body>
<dtn-profile active-step-section="general"></dtn-profile>
</body>
</html>

The dtn-profile HTML element implements a shadow DOM that allows it to be isolated from the rest of the application. For more Information on what a shadow DOM is, please refer to the What are webcomponents section.

Inputs

active-step-section

Opens the stepper directly on the specified section. If the value is absent or does not correspond to a valid section key, the form opens on the first step.

Name: active-step-section
Required: No
Type: ProfileSection
Default value: —

disable-heating-fields

When true, heating-related fields are hidden from the profile form.

Name: disable-heating-fields
Required: No
Type: boolean
Default value: false

Outputs

dtn:profile-saved

Custom DOM event dispatched on window when the user clicks on the “Save and quit” button or the “Finish” button in the last step.

Name: dtn:profile-saved
Type: ProfileSavedPayload
Emitted from: window

CSS Variables

Not applicable

Authentication

To access the data required to render this component, you first need to set up security in your application by following the guidelines listed in the Security for HOME Interfaces section. See more details in this section.

Type

ProfileSavedPayload

Key	Type	Description
`hasBeenModified`	`boolean`	Indicates if the profile has been modified.
`totalSteps`	`number`	The total number of steps. Could be use to determine if it’s the last step or not.
`step`	StepMetadata	The metadata associated with the active step when event has been triggered.

StepMetadata

Key	Type	Description
`name`	ProfileSection	The name associated with the step.
`position`	`number`	The step’s position inside the stepper. Values range from `[1; totalSteps]`.

ProfileSection

Allowed values
`general`
`housing`
`equipment`
`otherEquipment`
`lifestyle`

Home Basic

​Integration of the web component

​Inputs

​active-step-section

​disable-heating-fields

​Outputs

​dtn:profile-saved

​CSS Variables

​Authentication

​Type

​ProfileSavedPayload

​StepMetadata

​ProfileSection