Is it possible (without or with available plugins) to create custom “views”? Let’s say I want to create my own trello/kanban thing. I want to use it with raw text like (for example):
``mykanban
[todo]
choose new hosting
do the shopping
[in progress]
fix layout bug
[done]
something done
``
(Sorry, have problems with formatting above. But basically I want to design my own input tag/element with some input parameters and want also to design render view for this)
I want Obsidian to work with my made up raw format and to render with my made up html structure. It should render several divs as columns with items inside. I can edit source, remove some item list, it should render again applying new change.
It is possible to do it? Or I need to write my own plugin? Like DataView - it has “dataview” name at the beginning and formula inside.
So I said yesterday I’d make a mockup of something, and here goes. I changed the input example into this:
```dataviewjs
dv.view("_js/myKanBan", `\
- [todo]
- choose new hosting
- do the shopping
- [in progress]
- fix layout bug
- [done]
- something done
- More done stuff
`)
```
And with my custom dv.view() it translates that into the following:
It doesn’t respond to actually changing stuff, but it’s more a proof of concept, that stuff can be done using dv.view(). My definition of _js/myKanBan/view.js is:
// Split the input into lines, for easier processing
const lines = input.split("\n")
// console.log(lines)
// A regex to extract the text from [...]
const rxStatus = /^- *\[([^\]]+)\]/
const rxTodo = /^- *(.*)/
// Helpers to convert status keys
let status = " "
const statusList = {
"done": "x",
"todo": " ",
"in progress": "/"
}
if (lines ) {
let taskList = []
lines.forEach(line => {
const matches = line.match(rxStatus)
if ( matches && matches[1] in statusList) {
status = statusList[matches[1]]
} else {
const restOfLine = line.match(rxTodo)
if ( restOfLine )
taskList.push(`- [${ status }] ${restOfLine[1] }`)
}
// console.log(taskList)
})
return taskList.join("\n")
}
Hopefully, this could help you on your quest, and give you some ideas as to what can be done. It does require some javascript knowledge, and quite a lot of fiddling about, but there are possibilities therein.
Setup for this dv.view()
I made a folder vault/_js/myKanBan, and within this folder I created the view.js file. It can also hold a view.css in case you want custom css to accompany your view. The content of view.js is shown above. Since these are .js files, you either need to edit them outside of Obsidian in a pure text editor, or use some plugins to allow for them to show up and be editable within Obsidian.
