d4rekanguok / netlify-cms-widgets Goto Github PK
View Code? Open in Web Editor NEWA collection of custom widgets for netlify-cms
Home Page: https://custom-widgets.netlify.com
License: MIT License
A collection of custom widgets for netlify-cms
Home Page: https://custom-widgets.netlify.com
License: MIT License
fieldDisplay: ['object.field', 'name']
display_template: '{{title}} {{categories[0]}}'
{{year}}.{{month}}.{{date}} | {{name}}
CMS.registerWidget
instead of config.yml
?cms.js
sortBy
button in UI. User can select between asc
& desc
Fork the date time widget & make it optionally auto update every publish
When saving a document using the Publish and create new
button, the ID generator doesn't get populated with a new generated ID. It's empty, and read-only.
When using the ncw-id
widget to generate an unique id for a folder or file collection entry, generally speaking the CMS user is not interested in viewing that field in the UI. It could be useful to have an option to mark that field as hidden: true
for such use case. I would also say that the default should be true
as well.
I am trying to include id widget as a js deliver script, but I get exports is not defined in the console.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content Manager</title>
<!-- Include the script that enables Netlify Identity on this page. -->
<!-- <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script> -->
</head>
<body>
<!-- Include the script that builds the page and powers Netlify CMS -->
<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ncwidgets/[email protected]/dist/index.min.js"></script>
<script type="text/javascript">
CMS.registerWidget(Widget)
</script>
</body>
</html>
Hi, great project, looking forward to using it! Also, your i18n widget will be super helpful, too!
Is the unpkg script ready for use with ncw-reorder
? Currently getting "No control for widget 'ncw-reorder'." when trying to use it. Should I use the import script and manually register the widget instead?
Thanks so much!
<script src="https://unpkg.com/@ncwidgets/netlify-cms@^0.7.0/dist/netlify-cms.js"></script> - name: settings
label: Settings
delete: false
folder: _data/settings
create: true
fields:
- label: Section Order
name: order
widget: ncw-reorder
collection: sections
editor:
preview: true
create: false
id_field: id
display_template: '{{id}} | {{title}}'
fields:
- { label: "Id", name: "id", widget: "string" }
- name: sections
label: Map Sections
folder: _data/sections
editor:
preview: false
create: true
slug: "{{slug}}"
extension: 'json'
fields:
- label: Identifer
name: id
widget: string
- label: Title
name: title
...etc
entry
option instead of loadEntry
.Hi!
The re-order widget is stuck on perpetual loading for me, and I'm not sure why. I'm using the id widget to create the id for reference. I have an i18n setup using Hugo and I've only tried the widget on my local host using git-gateway.
Is the re-order widget compatible with i18n features and/or git-gateway?
I tried out the re-order widget as a workaround for the beta i18n features not supporting i18n: duplicate
in lists. It's a bit annoying to add and update each item with duplicate content manually for three languages. So, I created a folder collection instead to reference the items within a page template, but then realized that my client still needs to be able to re-order the items. So this widget would be a great solution!
Thanks!
It seems to me that even if the option display_fields
has plural form, it works with one field only. Moreover, it would be great, when you have more fields in a file collections, to be able via display_fileds
to display to the user more than one field value.
Am I wrong?
Thanks so much for your life-saver file-relation ๐
Hey @jonaseltes, let's continue our conversation from decaporg/decap-cms#800 here to avoid unnecessary notifications for people there!
I thought supporting inline widget would be a no-brainer, just add a umd
target and be done with it. But then I quickly realized that I would be bundling another copy of React + Immutable, on top of the ones that come with netlify-cms
.
If I understand correctly, to avoid duplicating React, we'd need to use the createClass
& h
functions provided globally by netlify-cms
instead of creating class & write JSX directly with React. Swapping the pragma is no problem with babel, but we'd need a custom plugin for createClass
. That leaves us with a duplicate of Immutable, but we might be able to treeshake it off so the final bundle size is not so terrible.
I want to do this, but it could be quite a bit of effort. In the mean time, if you're open to setting up a bundler, it'd be fairly easy & I can offer some help! Otherwise, I think the easiest thing to do is to copy the code over, modify them manually to use createClass
& h
, then inline another copy of immutable. I could offer you some help there as well.
It looks like loadEntry
, a method this widget relies on, is currently not working as expected in the latest version of netlify-cms-app
.
I'm currently trying to use the relation widget with a file in Gatsby.
Right now I have a folder at src/content/ with a couple of json files that I use as settings for my page, I added a new one for the relation widget, but I can't get the relation widget to load this options from the file.
this is my CMS.js file
import CMS from 'netlify-cms-app'
import BlogPostPreview from './preview-templates/BlogPostPreview'
import { Widget as FileRelationWidget } from '@ncwidgets/file-relation'
import { Widget as IdWidget } from '@ncwidgets/id'
const loadData = async (dataPath) => {
const data = await fetch(dataPath)
.then(data => data.json())
.catch(err => console.error(err))
window.repoFiles = data
}
loadData('src/content/authors.json');
CMS.registerWidget(IdWidget)
CMS.registerWidget(FileRelationWidget)
CMS.registerPreviewStyle('style/styles.scss');
CMS.registerPreviewTemplate('blog', BlogPostPreview)
The error in the console says
Uncaught (in promise) TypeError: Cannot read property 'entry' of undefined at Control.<anonymous> (control.js:62) at Generator.next (<anonymous>) at fulfilled (control.js:4)
It seems this line isn't getting the options from the file
this is my config in the config.yml file
collections:
- name: "configurations"
label: "Configurations"
editor:
preview: false
files:
- file: "src/content/authors.json"
label: "Authors"
name: "authors"
fields:
- {label: "Authors", name: "authors", widget: list, fields: [
{label: "Name", name: "name", widget: string},
{label: "Slug", name: "slug", widget: string},
{label: "ID", name: "id", widget: ncw-id, prefix: author}
]}
- name: "blog"
label: "Blog"
folder: "src/pages/blog"
create: true
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
fields:
- {label: "Template Key", name: "templateKey", widget: "hidden", default: "blog-post"}
- {label: "Title", name: "title", widget: "string"}
- {label: "Author", name: "author", widget: ncw-file-relation, collection: configurations, file: "src/content/authors.json", target_field: authors, id_field: id, display_fields: name }
- {label: "Publish Date", name: "date", widget: "datetime", format: "L", dateFormat: "MM/DD/YYYY"}
- {label: "Categories", name: "categories", widget: "select", multiple: true, options: [
{label: "News & Announcements", value: "news-announcements"},
{label: "Software", value: "software"},
{label: "Use Cases", value: "use-cases"},
{label: "Features & Updates", value: "features-updates"},
]}
- {label: "Body", name: "body", widget: "markdown"}
It's necesary to move my authors.json to the static folder? (same folder as config.yml file)
I'm needing this right now. A client want to be able to edit their form setups, which they have a few of. Would be neat to build a widget that spit out a form structure.
It only needs to be very basic:
Advanced:
For very simple form we can actually just use netlify-cms's list widget, but it's fairly clumsy UI-wise (difficult to add, every fields looks huge).
Just a addendum, in my case results.data[fieldName] its returning a array of strings. So was necessary make changes in the options map here in my code.
Originally posted by @kauly in #12 (comment)
Hi there, thanks for creating these widgets, I think NetlifyCMS is lacking behind with lots of things for sure.
I am using the ID Widget to generate unique IDs for collection items. Now the issue I am running into is that once I duplicate one of the items it copies the ID field too. Since it is supposed to be the unique identifier obviously this causes issues.
2 options i see:
regenerate
directly once someone duplicates an item?Regenerate
Button next to the ID field to do this manually?I'd be happy to help with a PR, but I since I never wrote a Widget I am not well aware of the possibilities.
Following the README, I added <script src="https://unpkg.com/@ncwidgets/netlify-cms@^0.7.0/dist/netlify-cms.js"></script>
, instead of <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
.
However when I went to the CMS, the values I had previously populated in relation widgets were missing. (Although saving entries with ncw-id
fields did not remove the relations in the .md
files). The little tags in the CMS UI were simply not there any more. When I removed the ncw-id script and widget, and adding back the original script, the relation tags came back in the UI.
The widget is not working if you want to use it in the same list as it should get data from.
It'll be a custom list widget, could probably wrap around another react table library, or write a very simple one.
Say you define a ncw-file-relation
which is optional. If I'm not wrong, after you select an item, you can only change the selected item with another and there is no way to unselect it to leave the field blank.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.