Sparky - composable user interfaces for internal services
Tags: ui, html, raku, automation
Published: 2024-07-01 15:09:30

---
title: Sparky - composable user interfaces for internal services
published: true
description: How to build user interfaces for internal web applications 
tags: UI, HTML, Raku, automation
cover_image: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGtlDheJZ5eLJMAzbiblEQWf7FrOIllGV4MA&s
# Use a ratio of 100:42 for best results.
# published_at: 2024-06-18 09:02 +0000
---

Sparky recent releases have introduced a lot of features allowing to build user interfaces for internal web applications.

---

In a nutshell [Sparky](https://github.com/melezhik/sparky) is a web platform to run automation tasks, and Sparky equips you with a rich feature set to build a frontend to launch tasks with parameters.


# HTML controls

Let's brew some coffee, even though I've been trying to slow down on caffeine recently.


```yaml
allow_manual_run: true
vars:
  -
    name: Flavor
    default: "latte"
    type: select 
    values: [ espresso, amerikano, latte ]

  -
    name: Topic  
    default: "milk"
    type: select
    values: [ milk, cream, cinnamon ]
    multiple: true

  -
    name: Step3 
    default: "boiled water"
    type: input
```

This simple Sparky job definition will spin up a simple UI with 3 controls:

![UI](https://github.com/melezhik/images/blob/master/Image%2001.07.2024%20at%2017.16.jpeg?raw=true)


In Raku scenario those input parameters are handled like that:


```perl
my $flavor = tags()<Flavor>;
my $water = tags()<Step3>;
my @topics = [];

# tags() needs :array modifier
# as multiple choices are passed

for tags(:array)<Topic><> -> $t {
   @topics.push: $t;
};
```

Simple, huh? 

One more coffee, please! 


# Or maybe you like a tea?

Another cool feature of Sparky is a multi scenario flows or group variables. Let's say you would like to give a choice of coffer _or_ tea, so instead of having 2 job definitions with different sets of variables, let's create just one:

```yaml
vars:

  # tea vars

  -
    name: Flavor
    default: "black" 
    type: select 
    values: [ black, green ]
    group: [ tea ]

  -
    name: Topic
    default: "milk"
    type: select
    values: [ milk, cream ]
    group: [ tea ]

  # coffee vars

  -
    name: Flavor
    default: "latte"
    type: select 
    values: [ espresso, amerikano, latte ]
    group: [ coffee ]

  -
    name: Topic  
    default: "milk"
    type: select
    values: [ milk, cream, cinnamon ]
    group: [ coffee ]
    multiple: true

  # common vars

  -

    name: Step3
    default: "boiled water"
    type: input
    group: [ tea, coffee ]

# every var
# in group vars
# is a separate
# scenario 

group_vars:
  - tea
  - coffee
```

Now, when the job gets run, we have a _choice_:

![UI2](https://github.com/melezhik/images/blob/master/Image 01.07.2024 at 17.40.jpeg?raw=true)


And then (when click on proper link), let's enjoy some tea:

![UI3](https://github.com/melezhik/images/blob/master/Image 01.07.2024 at 17.42.jpeg?raw=true)

---

# Conclusion

Sparky is a nice web console to build internal automation services with HTML and write automation scenarios with Raku. Thanks for reading.