🎁 New Blocks Voting Board

[Gervwyk]

Hi All.

Similar to the new connection voting board, we would like to hear from the community what Lowdefy Blocks are most desired.

If you have screenshots, links, packages of stuff you've seen that looks fancy and useful, please post it here. We would like to spark some discussions around what would be useful or what could make the current implementations easier to use.

Again, we will give priority to the highest voted requests, although we will also take into account technical consideration when deciding what Blocks to develop next.

Thanks in advance for your input.

[Gervwyk]

Charts

We already have AmChart Blocks, although powerful AmCharts can be tricky to master. There are other alternatives which is open-source and might be simpler to do basic things.

So options include:

• ECharts: https://github.com/apache/echarts
• ReCharts: https://github.com/recharts/recharts
• AntDesign Charts: https://charts.ant.design/
• ChartsCSS: https://chartscss.org/ - For micro-charts or sparklines

All of these can be viable options. I'm interested to hear more around what is important for you in a charting library / block implementation. For us:

• Micro charts are cool, if the charting lib is light-weight and fast, thats a bonus.
• Easy of configuration is a big one, and if the lib has a GUI for users to build a chart, that can help a lot. AmCharts 3 had a nice one.

Any other ideas / examples?

[Gervwyk]

After some research and testing we've decided to implement ECharts as a default charting blocks.
ECharts is feature rich, relatively easy to use, very well documented, Apache license and has great performance as compared to others.

[Gervwyk]

ECharts has shipped in v3.12.2 and is now a default Lowdefy block 🥳 Hope this makes charting a lot easier!

[Gervwyk]

Spreadsheet Things

It turns out that spreadsheets are useful things, LuckySheet caught my eye recently, as well as glide data grid. I'm wondering how that could work in a Lowdefy context.

Not sure about the specifics, but it could be interesting to explore futher.

[m8e]

As someone who needs as close to Excel as possible, in a web browser, with self-hosted backend, LuckySheet is far and above the best I've used of many. The amount of work to create excel-compatible functions and formulas is very large. LuckySheet being mostly Excel compatible is super powerful (functional programming via DAG).

IIRC the ratio of ExcelPowerUsers:SoftwareDevelopers is approximately 50:1
i.e. Excel-style grid-formula interface is familiar to a massive amount of people

[Gervwyk]

Hi @m8e Considering this use case and the complexity of something like Luckysheet, I'm thinking it might be a better fit as a custom Lowdefy block. Which means one can already develop and use it as a block.

Have you looked at the developing Custom Block in Lowdefy?

[m8e]

I will look thanks. Just experimenting hands-on with LowDefy now, I like it!

[Gervwyk]

Text Editor Input

Telling devs to write markdown is easy, asking everyone else to do the same, not so much. A nice text editor component can be very useful, especially in the CMS space where non-technical people require a means to edit and apply content markup.

So cool packages include:

• Draft-js: https://github.com/facebook/draft-js
• React-Quill: https://zenoamaro.github.io/react-quill/
• Editor-js: https://github.com/codex-team/editor.js

Any other known alternatives?
Is this something you would like to see as a Lowdefy Block?

[AhmedBytesBits]

Here are some additional suggestions you might find interesting:

1. https://alloyeditor.com/
2. https://github.com/react-page/react-page
3. https://github.com/michelson/dante2

[Gervwyk]

Flow diagram component

https://github.com/wbkd/react-flow

[m8e]

The wbkd/react-flow library examples look great!
https://reactflow.dev/examples/

Two alternate possibilities are:

Rete.js
https://rete.js.org/#/examples/task

Logic-Flow
http://logic-flow.org/guide/advance/event.html#%E7%94%BB%E5%B8%83%E4%BA%8B%E4%BB%B6

[AhmedBytesBits]

A pure JavaScript function should be allowed to shorten the learning curve of lowdefy, the block might look like:

_function_js:
    code: |
        (values, context)=>{
              arg1=values[0]
              arg2=values[1]
             var expr = Parser.parse(`${arg1} ^ x`);
             return expr.evaluate({ x: arg2 );  
        }

[Gervwyk]

I've created an issue for this. Basically, this happens because the params which AgGrid passes to the function have a cyclic object reference. Of course, the operators should handle this problem gracefully.

In the meantime, the hacky workaround would be not to pass the params directly to the function, but via a _function and then only passing required key, like the data. Like so:

valueFormatter:
   _function:
      __js.evaluate:
        code: |
          function (params) {
            console.log(typeof params)
            return "hello world"
          }
        on:
          - __args: 0.data

I know. This solution is not very elegant, but we'll try to come up with a fix for the cyclic object reference issue.

Side Note: We've also only implemented console.log for now. So info, warn, error will not work with the current implementation.

Usually, we just use _function with other operators, for example:

valueFormatter:
   _function:
      __string.concat:
          - '$ '
          - __args: 0.value

Or even using _nunjucks with _function for example:

valueFormatter:
   _function:
      __nunjucks:
          template: |
            Spent $ {{ total_spent }} in only {{ number_of_days }}.
          on:
            __args: 0.data

Operators will not always do the trick, so we need to make the _js solution work better as well.

[AhmedBytesBits]

Thanks for getting back to me on this, Though other solution work but the work around didn't

valueFormatter:
   _function:
      __js.function:
        code: |
          function (params) {
            console.log(typeof params)
            return "hello world"
          }
        on:
          - __args: 0.data

When I was talking on JS functions, I am talking about general purpose to allow more flexibility and functionality without the burden to incorporate these into the current used DSL.

[Gervwyk]

Sorry. My Bad. In the_function you should use _js.evaluate. Like so:

_function:
      __js.evaluate:
        code: |
          function (params) {
            console.log(typeof params)
            return "hello world"
          }
        on:
          - __args: 0.data

I'll correct my previous comment.

When I was talking on JS functions, I am talking about general purpose to allow more flexibility and functionality without the burden to incorporate these into the current used DSL.

Yes. I agree. That was the idea with the _js operator. However, for security reasons, we decided to build it inside a wasm runtime to isolate the js from the browser API. Unfortunately, this also imposes limitations. I'm not sure we need both like maybe a _js. dangerous_eval which directly calls browser eval. Almost like we had in a previous version. We'd have to carefully consider the security implications / benefit of this.

[AhmedBytesBits]

It is possible to limit the dangerous_eval to server side, so it ads flexibility for integration while not creating possible breaches in the front end.

[Gervwyk]

This could be useful. It is really simple to add server-side-only operators also. I've created a feature request issue for this so we can unpack the details and use cases there.

[vaddisrinivas]

Hi,

Right now my understanding is that (as per the examples and the documentation) the way to get an image on any page would be using an Html block.

Instead, adding an Image/Media block be helpful.

Requesting the devs to add their comments about this feature request.

Thanks

[Gervwyk]

From v3.16 we now have a Img block 📸 . This is a basic HTML <img/> implementation. and with the new public folder for hosting static content, it should be simple to add images to your Lowdefy app.

[vaddisrinivas]

thanks @Gervwyk ! thanks for the quick help!

[m8e]

Signature Capture Block

e.g.
https://github.com/agilgur5/react-signature-canvas

[Gervwyk]

Thanks @m8e This would be really useful!

I see the last update on react-signature-canvas was about two years ago. Let's maybe see if we can find 'n more popular / more updated component, I would like to include this as a default Lowdefy block.

[m8e]

Kanban Board+Columns+Cards

example board with cards

atlassian/react-beautiful-dnd on Github

[gustavopch]

Calendar

References:

• https://github.com/jquense/react-big-calendar (demo: https://jquense.github.io/react-big-calendar/examples/index.html)
• https://github.com/zackify/react-calendar (demo: https://calendar.zach.codes)
• https://github.com/nathanstitt/dayz (demo: http://nathanstitt.github.io/dayz)
• https://ant.design/components/calendar

[Radiergummi]

Map

Some kind of Google Maps/MapBox/OpenStreetMaps etc. integration would be nice, making it possible to render a geographical map inside Lowdefy. I'd imagine a block like this:

- id: block_id
  type: Map
  properties:
    zoom: 14
    center:
      - 48.1036991
      - 7.9734966

Obviously this would require additional configuration like which mapping API to use, and a token for that API. I'm not sure whether that should be passed as props to the block or configured globally.

MapInput

Along those lines, we need an input for geographical coordinates for our application; it would be neat to have an input type that renders a map and lets users place a marker on the desired location. Ideally, this would include an address search:

References:

• https://github.com/mariusandra/pigeon-maps (demo: https://pigeon-maps.js.org/)
• https://github.com/zcreativelabs/react-simple-maps (demo: https://www.react-simple-maps.io/)
  (note: not strictly what we want here)
• https://github.com/PaulLeCam/react-leaflet (demo: https://react-leaflet.js.org/)
• https://github.com/google-map-react/google-map-react (demo: http://google-map-react.github.io/google-map-react/map/main)

[Gervwyk]

Has been prioritized for 8 October sprint, #846

[utsl42]

Ant Design Table and Tree seem like they'd be nice additions:

https://ant.design/components/table/
https://ant.design/components/tree/