A little help with HTML custom components please

Anvil Q&A
1

I’ve read the docs and forum on custom components and HTML/JS back and forth but my brain just won’t see what’s clearly there.

If I have a custom HTML component:

<left="font-size:24px; color:#888; margin: 3em;">
  <div class="govuk-notification-banner" role="region"
  aria-labelledby="govuk-notification-banner-title"
  data-module="govuk-notification-banner">
  <div class="govuk-notification-banner__header">
    <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
      Find out more
    </h2>
  </div>
  <div class="govuk-notification-banner__content">
    <p class="govuk-notification-banner__heading">
      You can view the Government Design System
      <a class="govuk-notification-banner__link" href="https://design-system.service.gov.uk/">here</a> and find out more about Anvil Works by visiting 
      <a class="govuk-notification-banner__link" href="https://anvil.works/">their website</a>.
    </p>
  </div>
</div>
</left>

and I want to make the below property amendable on the Python side / in the IDE properties bit of the designer:

<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
      Find out more ### THIS BIT OF TEXT
    </h2>

What do I need to do? I’ve even tried putting a drop zone in there and nothing appears to happen - though that would seem the best way, perhaps…

Thank you in advance for assistance with this, it’s hurting my head.

2

Using the Javascript bridge you can affect HTML elements. The anvil.js package allows you to write anything you’d write in Javascript in Python. For example, to get that HTML element by id:

heading = anvil.js.window.document.getElementById('govuk-notification-banner-title')

From there you could change the text in it using standard Javascript techniques.

Do note that if you’re developing a custom component, and there might be more than one of these components on a form, then the ids will be duplicated and you’ll need a different approach.

Beyond that, you need to define the property in the IDE for the custom component and write the Python property functions to run when the property is set or get: Anvil Docs | Custom Components

2 Likes
3

Very much appreciated. That was enough to make it slot into place and now the docs make sense again.

1 Like