Objective: Create Rich Text elements which can be customized and stylized at creation time in order to add more depth to the Workspace. To perform this, the user only needs the workspaceId of where they want the text Element to be added.
All GraphQL API endpoints share the same base URL:
https://api.apps.us.bluescape.com/v3/graphql
Implementation using GraphQL APIs
| Query | createText |
|---|---|
| Comments | Only workspaceId is needed for this call |
Example Query:
mutation addRichTextExample($workspaceId: String!, $input: CreateTextInput!) {
createText(workspaceId: $workspaceId, input: $input) {
id
transform {x y scaleX scaleY}
pinned
zIndex
text
style { textTransform fontSize fontFamily verticalAlign color {r g b a }}
blocks {
...on TextBlock { align content}
}
}
}
This mutation can be called with the following variables:
{
"workspaceId": <workspaceId>,
"input": {
"blocks": {
"block": {
"align": "left",
"content": {
"span": {
"text": "Rich Text Example...",
"fontSize": 30,
"fontFamily": "Helvetica",
"fontWeight": "normal",
"fontStyle": "italic",
"textDecoration": "underline",
"color": { "r": 255, "g": 255, "b":255, "a": 1},
"backgroundColor": { "r": 0, "g": 0, "b": 200, "a": 1}
}
}
}
}
}
}
And this is the text you see created in your workspace:
Code sample
See below for full code examples of this implementation in cURL, Python, and Node.js.
cURL
curl --location --request POST 'https://api.apps.us.bluescape.com/v3/graphql/' \
--header 'Authorization: Bearer <SET_TOKEN>' \
--header 'Content-Type: application/json' \
--data-raw '{"query":"mutation addRichTextExample($workspaceId: String!, $input: CreateTextInput!) {\n createText(workspaceId: $workspaceId, input: $input) {\n ... on Text {\n id\n transform {x y scaleX scaleY}\n pinned\n zIndex\n text\n style { textTransform fontSize fontFamily verticalAlign color {r g b a }}\n blocks {\n ...on TextBlock {\n align content}}\n }\n }\n }","variables":{"workspaceId":{workspaceId},"input":{"blocks":{"block":{"align":"left","content":{"span":{"text":"Rich Text Example...","fontSize":30,"fontFamily":"Helvetica","fontWeight":"normal","fontStyle":"italic","textDecoration":"underline","color":{"r":23,"g":56,"b":100,"a":1},"backgroundColor":{"r":223,"g":156,"b":200,"a":1}}}}}}}}'
Node.js
const axios = require('axios');
const url = "https://api.apps.us.bluescape.com/v3/graphql/"
const token = "<SET_TOKEN>"
const workspaceId = "<WORKSPACE_ID>";
const createTextQuery =
`mutation addRichTextExample($workspaceId: String!, $input: CreateTextInput!) {
createText(workspaceId: $workspaceId, input: $input) {
... on Text {
id
transform {x y scaleX scaleY}
pinned
zIndex
text
style { textTransform fontSize fontFamily verticalAlign color {r g b a }}
blocks {
...on TextBlock {
align content}}
}
}
}`
const textParams = {
"workspaceId": workspaceId,
"input": {
"blocks": {
"block": {
"align": "left",
"content": {
"span": {
"text": "Rich Text Example...",
"fontSize": 30,
"fontFamily": "Helvetica",
"fontWeight": "normal",
"fontStyle": "italic",
"textDecoration": "underline",
"color": { "r": 255, "g": 255, "b":255, "a": 1},
"backgroundColor": { "r": 0, "g": 0, "b": 200, "a": 1}
}
}
}
}
}
}
const createText = async () => {
try {
const response = await axios.post(url,
{query: createTextQuery, variables: textParams},
{headers: {"Authorization": "Bearer " + token}})
console.log(response.data);
return response
}
catch(error) {
console.error(error)
}
}
createText();
Python
import requests
import pprint
url = "https://api.apps.us.bluescape.com/v3/graphql/"
token = "<SET_TOKEN>"
workspaceId = "<WORKSPACE_ID>";
query = """
mutation addRichTextExample($workspaceId: String!, $input: CreateTextInput!) {
createText(workspaceId: $workspaceId, input: $input) {
... on Text {
id
transform {x y scaleX scaleY}
pinned
zIndex
text
style { textTransform fontSize fontFamily verticalAlign color {r g b a }}
blocks {
...on TextBlock {
align content}}
}
}
}
"""
params = {
"workspaceId": workspaceId,
"input": {
"blocks": {
"block": {
"align": "left",
"content": {
"span": {
"text": "Rich Text Example...",
"fontSize": 30,
"fontFamily": "Helvetica",
"fontWeight": "normal",
"fontStyle": "italic",
"textDecoration": "underline",
"color": { "r": 255, "g": 255, "b":255, "a": 1},
"backgroundColor": { "r": 0, "g": 0, "b": 200, "a": 1}
}
}
}
}
}
}
def makeQuery():
try:
response = requests.post(url,
headers={"Authorization": "Bearer " + token},
json={'query': query,
'variables': params})
response.raise_for_status()
except requests.exceptions.HTTPError as err:
raise SystemExit(err)
return response.json()
if __name__ == "__main__":
response = makeQuery()
pprint.pprint(response)
Output
{
"data": {
"createText": {
"id": "<object_ID>",
"transform": {
"x": 0,
"y": 0,
"scaleX": 1,
"scaleY": 1
},
"pinned": false,
"zIndex": 4,
"text": "Rich Text Example...",
"style": {
"textTransform": "none",
"fontSize": 64,
"fontFamily": "Dosis",
"verticalAlign": "top",
"color": {
"r": 255,
"g": 255,
"b": 255,
"a": 1
}
},
"blocks": [
{
"align": "left",
"content": [
{
"span": {
"fontFamily": "Helvetica",
"fontSize": 30,
"fontStyle": "italic",
"textDecoration": [
"underline"
],
"color": {
"r": 255,
"g": 255,
"b": 255,
"a": 1
},
"backgroundColor": {
"r": 0,
"g": 0,
"b": 200,
"a": 1
},
"content": [
{
"text": "Rich Text Example..."
}
]
}
}
]
}
]
}
}
}
After running the mutation above, the Rich Text element is added to the workspace.
If you want to create more complex structures, such as lists and applying specific format to a particular word or group of words, please see the example below.
To generate the following Text element use the graphQL mutation below:
mutation myCreateTextWithBlocks($ws: String! $x: Float! $y: Float!, $width:Float!, $height:Float!) {
createText(
workspaceId: $ws
input: {
transform: {
x:$x
y:$y
}
style:{
width:$width
height:$height
fontSize:65
fontFamily:"Helvetica"
textTransform:none
verticalAlign:top
color:{ r:255 g:255 b:255 a:1 }
backgroundColor:{ r:0 g:0 b:255 a:1 }
}
blocks: [
{
block:{
align: left
content: [
{ text: "text block example, line one" }
]
}
},
{
block:{
align: left
content: [
{ text: "" }
]
}
},
{
list:{
kind:bullet
items: [
{
indent: 0,
content: [
{ text: "list 1" }
]
},
{
indent: 1,
content: [
{ text: "list 2" }
]
}
]
}
},
{
block:{
align: left
content: [
{ text: "" }
]
}
},
{
block:{
content:[
{ text:"new " },
{
span:{
fontWeight:bold
content:[
{ text:"BOLD" }
]
}
},
{ text:" text" }
]
}
}
]
}
)
{
id
text
transform {x y}
}
}
with these variables:
{
"ws": "",
"x": 0,
"y": 0,
"width": 900,
"height":600
}
Query Rich Text in GraphQL
If you want to see the details of the format of Text elements with Rich Text, you can use the query below:
query getTextElementsfromWorkspace ($workspaceId: String!){
elements(workspaceId: $workspaceId type: Text ) {
type: __typename
id
... on Text {
id
transform {
x y
}
style {
color { r g b a}
}
blocks {
... on TextBlock {
align
content
}
... on TextList {
align
kind
items {
align
indent
content
}
}
}
}
}
}
use these variables:
{
"workspaceId": <workspaceId>
}
This query returns a large amount of information on the text element, however, it can be altered to return more or fewer details depending on what is needed.
Where to Next?
Not what you were looking for? Reply below or Search the community and discover more Bluescape.