Vulcan: Snackbars in Custom Components

There are use-cases for custom components to have behaviour that extends beyond the local scope of the component, and has an impact on global elements in the Vulcan application.

We’ve seen this with examples of generating new Objects on the Chart canvas.

One of the simplest, yet visually useful options are Snackbars. These are forms of visual notifications that can be presented to people that are viewing the Chart, to alert them to an action taking place, a prompt, some feedback or advice.

Snackbars are presented on top of the the main UI. Let’s first create and use a Snackbar in Vulcan, then we will explore some of the ways we can modify and configure it and finally some use-cases which might get you started.

Create a Custom Component

:one:
Let’s start off by bootstrapping a new Component. Visit https://app.vulcanapp.com/components-library and click on the :heavy_plus_sign: button to create a new component. Give it a name, a shortcode and enter a name in the code editor script section.

:two:
Let’s dive straight in an add the markup for our Snackbar in the template part of our code.

<v-snackbar v-model="snackbar">
      {{ text }}
      <v-btn color="primary" text @click="dismissSnackbar">
        Close
      </v-btn>
 </v-snackbar>

We simply have a v-snackbar component, that uses the snackbar data property as the v-model which will determine the visibility of the Snackbar. snackbar data property will default to false, which means that it will not be displayed.

Then we have some text data property, which will be the content that is shown in the snackbar as a message.

Following that, we have a v-btn component, which will be an explicit action to dismiss the Snackbar when we are done with it. This will be done with a @click handler on the v-btn component, which will call a method called dismissSnackbar.

Let’s go ahead and add that to our Component code, and we will switch to the :eye: Preview tab so that we can see our changes live.

Although our markup is in, we don’t see anything in the preview - which is to be expected.

:three:

We will now hook up those data properties in the script area of our code.

We will create the two data properties.

data: function () {
  return {
    text: "Yummy, I'm a tasty snack",
    snackbar: false
  }
},

and a placeholder method for dismissing the Snackbar.

methods: {
  dismissSnackbar() {
    console.log('close snackbar');
  }
},

At this point, you will still not see any UI in the preview, but you also shouldn’t have any errors in your browser console.

:four:

Let’s now add a button that will be displayed in our UI and will trigger the display of the Snackbar.

<v-btn @click="showSnackbar" dark color="primary">Show</v-btn>

We will add this just above our v-snackbar component. It is a simple button component with a @click handler which will trigger the showSnackbar method. I’ve also set the dark property and changed the color property to primary so we get our standard pink background and white text.

At this point you will see an error, since we haven’t created the showSnackbar() method, so let’s add that before or after our dismissSnackbar() method.

showSnackbar() {
  console.log('show Snackbar');
}

:five:

At this stage, clicking the button will simply log a message to the console, so now we need to make the small step to actually get the Snackbar to show. Update the showSnackbar() method, as follows:

showSnackbar() {
  this.snackbar = true;
}

If you now click the button, you should see our Snackbar appear at the bottom of the window.

:six:

Finally, let’s update the dismissSnackbar() method so that we can explicitly close the Snackbar when we’ve finished reading it.

dismissSnackbar() {
  this.snackbar = false;
},

And that’s that. Let’s actually try it out in the Vulcan Charts, by saving our component an opening a Chart.

Let’s add an object, such as a Person or Organisation object (basically any object type that has the :tophat: Magic Editor).

Add the component to the editor using the / Slash Command. Hit shift + enter

Now when you click the button, a new Snackbar should appear over the main Chart canvas.

Optional Properties

In this Custom Component, I’ve created a more complex UI that enables control over the Snackbar properties.

From here, you can play with the various configuration options for Snackbars, to suit your needs.

<template>
  <v-card>
    <v-card-text>
      <v-container fluid>
        <v-row>
          <v-col cols="12">
            <v-radio-group v-model="color" row>
              <v-radio
                v-for="(colorValue, i) in ['success', 'info', 'error', 'cyan darken-2']"
                :key="i"
                :color="colorValue"
                :label="colorValue"
                :value="colorValue"
              ></v-radio>
            </v-radio-group>
          </v-col>
          <v-col cols="12" sm="3">
            <v-checkbox
              v-model="x"
              label="Left"
              value="left"
            ></v-checkbox>
          </v-col>

          <v-col cols="6" sm="3">
            <v-checkbox
              v-model="x"
              label="Right"
              value="right"
            ></v-checkbox>
          </v-col>

          <v-col cols="6" sm="3">
            <v-checkbox
              v-model="y"
              label="Top"
              value="top"
            ></v-checkbox>
          </v-col>

          <v-col cols="6" sm="3">
            <v-checkbox
              v-model="y"
              label="Bottom"
              value="bottom"
            ></v-checkbox>
          </v-col>

          <v-col cols="12" sm="3">
            <v-checkbox
              v-model="mode"
              label="Multi-line (mobile)"
              value="multi-line"
            ></v-checkbox>
          </v-col>

          <v-col cols="12" sm="3">
            <v-checkbox
              v-model="mode"
              label="Vertical (mobile)"
              value="vertical"
            ></v-checkbox>
          </v-col>

          <v-col cols="12" sm="4">
            <v-text-field
              v-model="text"
              class="px-4"
              label="Text"
              type="text"
            ></v-text-field>
          </v-col>

          <v-col cols="12" sm="4">
            <v-text-field
              v-model.number="timeout"
              class="px-4"
              label="Timeout"
              type="number"
            ></v-text-field>
          </v-col>
        </v-row>

      </v-container>
      <v-btn
        block
        color="primary"
        dark
        @click="snackbar = true"
      >
        Show Snackbar
      </v-btn>
    </v-card-text>

    <v-snackbar
      v-model="snackbar"
      :bottom="y === 'bottom'"
      :color="color"
      :left="x === 'left'"
      :multi-line="mode === 'multi-line'"
      :right="x === 'right'"
      :timeout="timeout"
      :top="y === 'top'"
      :vertical="mode === 'vertical'"
    >
      {{ text }}
      <v-btn
        dark
        text
        @click="snackbar = false"
      >
        Close
      </v-btn>
    </v-snackbar>
  </v-card>
</template>

<script>
    module.exports = {
        name: 'Snackbar',
        props: {},
        data () {
      return {
        color: '',
        mode: '',
        snackbar: false,
        text: 'Hello, I\'m a snackbar',
        timeout: 6000,
        x: null,
        y: 'top',
          }
        },
        methods: {},
        computed: {}
    }
</script>

<style scoped>
    /* styles here */
</style>

And there you have it. Snackbars are a useful component for connecting your Component experience to the wider app experience in Vulcan. Be wary though, don’t overdo it - this power comes with responsibility and unnecessary use of such features is a sure-fire way for people not to use your component. Use it gracefully, and you can have a very positive impact. Test, experiment and get it right!!!

Happy coding!