Reactive
Build your app
Catalog ›Companies & SMBs ›Sales & customers

Clients — the Studio address book

One address book for the whole **Studio** space: clients added here show up in Compass (deals and activities) and in Tally (quotes and invoices).

data space «studio-en» — this micro app writes into the space shared with the solutions that include it.

Shared micro app — used by Compass, Tally

▶ Use this app

Integrates with: Compass, Tally — same data space.

clientscontactssharedstudio

What it records

  • Name or company
  • Contact person
  • Phone
  • Email
  • VAT ID
  • Address
  • Municipality (e.g. Milano)

How it works

This is a Reactive app: a plain text document that your browser turns into a working app — forms, live data, tables, statistics and even charts, with nothing to install or configure.

  1. Use it right away. Hit “Use this app”: it opens right in your browser, ready to go, with data saved only on your device.
  2. Your data stays yours. Everything is stored locally on your device, kept separate for each app: no account, no server, nothing to set up.
  3. Make it your own. The text below is the entire app: copy it, tweak fields, views and words, and your changes become interactive instantly.
  4. Share it as a file. An app is a simple file: save it, export it or share it with a link; and with encrypted collaboration several people edit the same data in real time.
The app’s source
# 👥 Clients

One address book for the whole **Studio** space: clients added here show up in
Compass (deals and activities) and in Tally (quotes and invoices).

::::form{path="clients" id="fcli"}
::input{form="fcli" field="name" placeholder="Name or company" required="true"}
::input{form="fcli" field="contact" placeholder="Contact person"}
::input{form="fcli" field="phone" placeholder="Phone"}
::input{form="fcli" field="email" type="email" placeholder="Email"}
::input{form="fcli" field="vatid" placeholder="VAT ID"}
::input{form="fcli" field="address" placeholder="Address"}
::add-form{form="fcli" path="clients" label="Add client"}
::::

:::table{path="clients" headers="Client,Contact,Phone,Email,VAT ID" deletable="true" editform="fcli"}
**{name}** | {contact} | {phone} | {email} | {vatid}
:::

Total clients: **:count[ncli]{path="clients"}**

## Official municipality codes (open data)

The client's Italian municipality, spelled right: search the official data —
name, plate code and ISTAT code — and the list updates as you type.

::input[od_cityq]{placeholder="Municipality (e.g. Milano)"}

::od-query{into="od_cities" sql="SELECT LABEL_COMUNE_IT AS city, SIGLA_AUTOMOBILISTICA AS plate, CODICE_COMUNE AS code FROM voc_istat_cities WHERE DATA_FINE_VALIDITA = '31-12-9999' AND LABEL_COMUNE_IT LIKE '%' || UPPER('{#od_cityq}') || '%' ORDER BY city" limit="20"}

:::table{path="od_cities" headers="Municipality,Plate,ISTAT code" search="false" pagesize="5"}
{city} | {plate} | {code}
:::