Creating your own blocks

The block market has a growing range of blocks, but sometimes you want one that works exactly the way you need. You can build your own blocks and reuse them across any interface in your organisation. They appear on the Mine tab of the builder's Blocks panel (see My Blocks Sidebar).

Three ways to create a block

Start from scratch

1. In the interface builder, click the Add Blocks tool (the plus icon) and open the Mine tab.
2. Click New.
3. Give the block a title, write its code (see below) and save.

Duplicate a block from the market

1. On the All tab of the Blocks panel, find the block you want to start from.
2. Click its ⋮ button and choose Duplicate / Extend. This option only appears if you're allowed to create blocks.
3. Qik opens a copy of the block's code for you to rename and change. The copy belongs to your organisation, and the original is unaffected.

Convert a Custom Code block

If you've already built something in a Custom Code block, select it and click the Convert into a Block button at the top of its options. Enter a title, and Qik creates a block from the code and swaps the instance for it.

What a block is made of

• HTML Template: a Vue template.
• Javascript: Vue component options, written as a single object in braces, { ... }.
• SCSS/CSS: styles scoped to this block. They only apply to instances of the block and the elements inside them.
• Fields: the settings people fill in when they use the block, such as a heading, an image or a list of buttons. Each instance's values are available in your template as data.<fieldKey>, for example {{ data.heading }}. Reference fields (an image, a person, an article) arrive as loaded records, so you don't need to fetch them yourself.
• Slots: optional drop zones where people can drag other blocks inside yours, which is useful for layout blocks such as columns or cards.
• Documentation: help text people see when they click Block Documentation (the question-mark button) in the block's options.
• Category: which category chip the block appears under in the Blocks panel.

The same rules as Custom Code apply: created() also runs during the server render, so browser-only code belongs in mounted(). See Using the 'Custom Code' Block.

Editing and publishing a block

Select an instance of your block in the builder, then use the buttons at the top of its options:

• Edit Block (pencil): edit the block's code and fields. These buttons appear only for your organisation's own blocks, and only if you can edit them.
• Publish Block (box): publish a new version of the block, with a commit message describing what changed.

At the bottom of the options, the version selector chooses which version this instance uses:

• Development: the block's current draft, including unpublished changes. Blocks you drag in from the Mine tab start here.
• Stable: the latest published version of the block.

Switch an instance to Stable once the block is finished. Your later edits then won't reach live pages until you publish the block again. A block's version is separate from the interface's own releases: you still publish the interface to put the page live (see Saving & Publishing).

Tips

• Give the elements in your block stable, descriptive class names (.card, .title, .avatar). That lets people restyle an instance from a wrapping section without editing the block.
• If you change a block's fields, update its template to match. Existing instances keep their old values until someone edits them.