Netlify-cms: Are we able to customize the dashboard UI?

[pfftdammitchris]

Are we able to customize the dashboard UI to add some chart SVG's, controls, etc?
(Searched everywhere for this simple question although I can't find an answer to such a simple question. Forgive me for my ignorance)

[tech4him1]

@pfftdammitchris Can you give an example (screenshot, link, etc.)? What do you actually want the charts and controls to show or do?

[pfftdammitchris]

@tech4him1 for example if we are able to customize the dashboard to have widgets like everything on this page:
http://wrapbootstrap.com/preview/WB0573SK0

Are we only limited to working with the default dashboard, or the default UI?

How would we change the sorting of items in each collection by date, and also list the date on each item? Currently only the title is shown on each item. In the screenshot below the blue dates would be an example of customizing the UI:

[erquhart]

Yeah it's not that kind of admin interface, it's purpose built for Netlify CMS collection display.

That said, you _should_ be able to swap in your own components to replace interfaces like this one, we're just not there yet.

[calpa]

Will this feature be included in the schedule?

[tech4him1]

@calpa I don't think this issue is really well-defined enough to start working on or add to a schedule. If you could specify your use case and some details of how you think it should work and look, that might help us move forward.

[calpa]

@tech4him1 For now, the only thing shown in the dashboard is the title of the content.
It would be better if the date is shown as @pfftdammitchris mentioned.

Use case:
Identify the published date of the article

[kre1z0]

It would be nice to add the ability to output any field from the collection. I have a list of news and I would like to see which of them are displayed on the main.

[leonardodino]

I think this turned out to be a duplicate of #2019.

I get that there are many customizations besides the EntryCard, but it's by far the most requested one. (and some filtering and ordering of the list).

I do have some code done, with examples below, but I'm too short on time right now to contribute it back. If anyone is interested, please don't hesitate to copy (: and contribute it upstream here. (or just use it, if time is also a constrain)

examples

• the article can link to a editorial (the colored tag on top) and many authors. both are optional.
• on a simpler case, the articles show the date on the right-hand side, and a "curl" if it contains a cover image.
• also, if the post has a featured: true on it's frontmatter it renders a blue band on the left.

the language is pt-BR, but I guess you can figure it out.

||
|
|
|:--:|:--:|:--:|
| articles | editorials | authors |

code

all the code is open-sourced at:

• https://github.com/campus-online/cms
• https://github.com/campus-online/content/pull/3

the most relevant PR for this feature is https://github.com/campus-online/cms/pull/9

the "whole" code for the author card (the simplest one) is here.
along with the call to register it with the cms here

[AdrianArenal]

@leonardodino Amazing stuff ! Just what I was looking for ! I can't wait to see it on live 💃

[erquhart]

@leonardodino agreed, this became about entry card customization. The original issue is about dashboard customization, eg. creating an actual data driven dashboard, but Netlify CMS doesn't have a dashboard at all, so I'm thinking this should be closed. Would you mind porting your last comment to #2019 so we can close this?

[leonardodino]

done! @erquhart

[calpa]

Can we have a pull request on this? I think this update helps a lot...

[tech4him1]

@calpa See https://github.com/netlify/netlify-cms/issues/1498#issuecomment-465302384.

[adamtaylor13]

@leonardodino Where is this registerEntryCard method registered? I tried using it, but I'm getting a WEBPACK_IMPORTED_MODULE error that it's not a function. I then thought you had added it custom to the campus-online codebase, but I can't find it anywhere there either. What am I missing? :(

[leonardodino]

@adamtaylor13, registerEntryCard only exists in my fork.
Unfortunately I haven't had the time to make a PR upstream. 😕

You probably didn't find it because github search doesn't work on forks.
^{(unless the fork has more stars than the upstream repo)}

You can find it on the master branch in the following files:

• netlify-cms-core/src/components/Collection/Entries/EntryListing.js
• netlify-cms-core/src/lib/registry.js

or: just follow the diff/patch in the PR.
It also includes some basic docs that will help on getting your PR merged.

---

You, and anyone interested in contributing this code to the upstream netlify-cms have my permission and rights to use the code, no attribution needed 🙂

[numoonchld]

I'd also like to request ability for a solarized mode of the CMS UI.

UseCase: The stark white computer screen hurts my eyes while composing blogs. It'd be great to have solarized light and solarized dark theme.

[erquhart]

@numoonchld https://github.com/netlify/netlify-cms/issues/1727

[oskery]

I'm sorry to disturb this resolved matter but I am new here and don't understand. Is the possibility of adding an additional field to each entry (e.g. a date) in the admin dashboard something that is coming or something that we can implement ourselves? I looked at the EntryCard implementation but I am not experienced enough to understand the code. To me it seems like such a trivial thing from a usability standpoint and maybe it is possible but not talked about that much, I just haven't found a simple enough solution for it. OR is this never to be implemented as "Netlify CMS doesn't have a dashboard", I didn't really get that part? @erquhart

[erezrokah]

@oskery We've started a new effort under https://github.com/netlify/netlify-cms/issues/2557. Feel free to comment on that issue.