Notion js SDK asks for title even after title is provided - javascript

I am trying to create a database using notion sdk and in this is what my payload looks like:
parent: {
type: "page_id",
page_id: process.env.PAGE_ID,
},
icon: {
type: "emoji",
emoji: "🐽",
},
title: [
{
type: "text",
text: {
content: "DB Title",
},
},
],
properties: {
"Prop-1": {
date: {},
},
"Prop-2": {
multi_select: {
options: [
{
name: "option-1",
color: "green",
},
{
name: "option-2",
color: "gray",
},
{
name: "option-3",
color: "pink",
},
],
},
},
"prop-3": {
multi_select: {
options: [],
},
},
},
I have already added title which can be seen above however the response give 400 status code.
#notionhq/client warn: request fail { code: 'validation_error', message: 'Title is not provided' }
Can't figure our where am I going wrong.

You also need to add a title column to your properties. Look at the example payload in the docs, you will see a "Name" title column.
https://developers.notion.com/reference/create-a-database

Related

Sanity CMS and Leaflet.Js while using geolocation API

I have created a sanity schema which works perfectly according to the tutorial. However I have a leaflet.js plugin and I am trying to get it to auto find my location when I create a new template in the sanity studio. This was already done in the tutorial below, but when I do it, I get the sanity map showing up but I do not get the marker on my current location. Instead I get the default San-Francisco.
In the tutorial the lady gets allows the browser to share her location. However I do not get that prompt. Is this something to do with localhost?
I am following this tutorial but I don't know what I missed.
Relevant parts from 31.00-37.00. Tutorial below:
https://www.youtube.com/watch?v=YtFfUER8ta8
Below is my posts.js
const getPosition = (options) => {
if (navigator.geolocation) {
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject, options);
});
}
};
export default {
name: "post",
title: "Blog Post",
type: "document",
initialvalue: async () => ({
postedAt: await getPosition()
.then(({ coords }) => {
const { latitude, longtitude, altitude } = coords;
return {
_type: "geopoint",
lat: latitude,
lng: longtitude,
alt: altitude || undefined,
};
})
.catch(() => undefined),
}),
fields: [
{
name: "title",
title: "Title",
type: "string",
},
{
name: "postedAt",
type: "geopoint",
title: "Location",
},
{
name: "slug",
title: "Slug",
type: "slug",
options: {
source: "title",
maxLength: 96,
},
},
{
name: "author",
title: "Author",
type: "reference",
to: { type: "author" },
},
{
name: "mainImage",
title: "Main image",
type: "image",
options: {
hotspot: true,
},
},
{
name: "categories",
title: "Categories",
type: "array",
of: [{ type: "reference", to: { type: "category" } }],
},
{
name: "publishedAt",
title: "Published at",
type: "datetime",
},
{
name: "body",
title: "Body",
type: "blockContent",
},
],
preview: {
select: {
title: "title",
author: "author.name",
media: "mainImage",
},
prepare(selection) {
const { author } = selection;
return Object.assign({}, selection, {
subtitle: author && `by ${author}`,
});
},
},
};
leaflet-input.json
{
"tileLayer": {
"attribution": "© OpenStreetMap contributors",
"url": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
}
}

Dynamically add values to specific property in object - Fluent UI React ContextualMenu

I have the following ContextualMenu structure inside my SPFx Extension build with Fluent UI React:
const menuProps: IContextualMenuProps = {
items: [
{
key: 'Access',
itemType: ContextualMenuItemType.Section,
sectionProps: {
topDivider: true,
bottomDivider: true,
title: 'Sites you have access to',
items: [
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
],
},
},
],
};
I also a MS Graph call running getting me some SharePoint Sites & Teams.
I would now like to push those dynamic responses to the to the menuProps at the right place.
So basically add the dynamic array into the nested items object.
items: [
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
],
How can I target that "object"? (hope I understand correctly and items is an object...)
Is there a way to do this using array.push()?
To make this library agnostic, it would look something like this:
const obj = {
items: [
{
key: 'Access',
itemType: '',
sectionProps: {
topDivider: true,
bottomDivider: true,
title: 'Sites you have access to',
items: [
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
],
},
},
],
};
obj.items[0].sectionProps.items.push({ key: 'DynamicValue3.1', text: 'DynamicValue3.2' })
console.log(obj.items[0].sectionProps.items)
Your console.log would return this:
[
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
{ key: 'DynamicValue3.1', text: 'DynamicValue3.2' }
]
If you can access menuProps: IContextualMenuProps, then just replace obj with the necessary variable.

Highcharts: How to give a different color to each category in barcharts?

As the question states. I'm trying to give a different color to each category in barcharts. It can be easily done in linecharts where we can pass each series as an object. But I haven't been able to do this on barcharts. Please see the picture to get more clarity.
Also, see demo code how I'm trying to achieve it. It looks something like below.
xAxis: {
categories: ['Nominal Bonds', 'Inflation', 'Equity'],
},
series: [
{
data: [{ name:'Nominal Bonds 1',y:5 }, { name:'Nominal Bonds 2',y:23}]
},
{
data: [{ name:'Inflation 1',y:15 }, { name:'Inflation 2',y:12}, { name:'Inflation 3',y:22}]
},
{
data: [{ name:'Equity 1',y:35}, { name:'Equity 2',y:21 }, { name:'Equity 3',y:52 }, { name:'Equity 4',y:31}]
}
]
Any help would be appreciated.
You can do it by using this: xAxis.type: 'category'
Pseudo code below:
xAxis: {
type: 'category',
},
series: [
{
data: [{ name:'Nominal Bonds 1',y:5 }, { name:'Nominal Bonds 2',y:23}]
},
{
data: [{ name:'Inflation 1',y:15 }, { name:'Inflation 2',y:12}, { name:'Inflation 3',y:22}]
},
{
data: [{ name:'Equity 1',y:35}, { name:'Equity 2',y:21 }, { name:'Equity 3',y:52 }, { name:'Equity 4',y:31}]
}
]
Demo: https://jsfiddle.net/BlackLabel/q97vxzct/

Use fields from data() as chart data - FusionCharts

I want to show simple charts using Vue 2 and FusionCharts. I'm fetching my data from firebase and I run some calculations before I can fetch this to FusionCharts component. As these calculations are performed the result is stored in values in Vue's data function. I was following this link here. Problem is it defines chartData outside the export default. My question is how do i use values in my data function to populate my chart? My code looks something like this:
export default {
name: "dash",
data: () => ({
users: [],
total: 0,
activeCount: 0,
maleCount: 0,
femaleCount: 0,
newUssrs: 0
}),
computed: {
chartData: [
{
label: "Male",
value: this.maleCount
},
{
label: "Female",
value: this.femaleCount
}
],
dataSrc: {
chart: {
caption: "Total User Count",
subcaption: "",
xaxisname: "Gender",
yaxisname: "User counts",
numbersuffix: "",
theme: "fusion"
},
data: this.chartData
}
},
mounted() {
this.getData();
}
};
computed properties need to be functions which return the computed data. Like:
computed: {
chartData() {
return [
{
label: "Male",
value: this.maleCount
},
{
label: "Female",
value: this.femaleCount
}
]
},
dataSrc() {
return {
chart: {
caption: "Total User Count",
subcaption: "",
xaxisname: "Gender",
yaxisname: "User counts",
numbersuffix: "",
theme: "fusion"
},
data: this.chartData
}
}
},

How to add objects to an array during creation using a loop in Javascript?

I am trying to write some meta information for a website (using vue-meta) and I need to add some tags as objects within an array named meta.
The code is like this:
metaInfo() {
return {
htmlAttrs: { lang: "en"
},
title: this.Post.Title,
meta: [
{
name: "description", content: this.Post.Title
},
{
name: "date", content: this.Post.DateCreated
},
{
name: "author", content: this.Post.Author
},
// Now I need multiple objects of: {name: "tag", content: "Tags.TagName"} like this but doesn't work:
function() {
this.Tags.forEach(function (TagName, index) {
{ property: "tag", content: "TagName" }
})
}
],
}
}
How can I create my array so that I end up with this for example:
meta: [
{
name: "description", content: "Javascript question"
},
{
name: "date", content: "20200421"
},
{
name: "author", content: "volumeone"
},
{ property: "tag", content: "Javascript" }
,
{ property: "tag", content: "Programming" }
,
{ property: "tag", content: "Newbie" }
]
you can do such sort of thing.
var meta = [{
name: "description", content: this.Post.Title
},
{
name: "date", content: this.Post.DateCreated
},
{
name: "author", content: this.Post.Author
}]
this.Tags.forEach(function (TagName, index) {
meta.push({ property: "tag", content: "TagName" })
})
metaInfo() {
return {
htmlAttrs: { lang: "en"
},
title: this.Post.Title,
// or you can just write "meta" instead of "meta: meta" its an shorthand // code
meta: meta
}
}
Unless I'm missing something, you can just use push and pass the object.
var meta = [];
meta.push({"property" : "tag","content" : "test"});
console.log(meta);

Categories