Core

Core JavaScript features

Last updated 2 years ago

Was this helpful?

Core

Core JavaScript features

Integrate your JavaScript code with the basic functions of your AppMachine app. This page discusses the available functions and possible errors that lie at the basis of each JavaScript block.

Get Block Name

Get the current name of the block.

import { getBlockName } from '@myjsblock/sdk'

const myBlockName = await getBlockName();

// or

getBlockName().then(data => {  
    console.log(data);
});

Errors

Here is a list of errors that can be thrown when calling this function in addition to :

Error Code

Description

INVALID_ARGUMENT

The 'caption' property is not defined on the block.

Get Property

Get a property by name from the current block.

import { getProperty } from '@myjsblock/sdk'

const myProperty = await getProperty('myProperty');

// or

getProperty('myProperty').then(data => {  
    console.log(data);
});

Name

Type

Required

Default

propertyName

String

✅

Error Code

Description

INVALID_ARGUMENT

The provided propertyName is not found.

Get a public URL of an image, based on the given imageId.

import { getImageUrl } from '@myjsblock/sdk'

const myImage = await getImageUrl('myImageId');

const imageElement = document.createElement('img');
imageElement.src = myImage;

document.body.appendChild(imageElement);

By default the image URL that will be returned is the URL of the image in full resolution. We recommend using fixed dimensions for the width and height options when using high resolution images. This also improves performance and saves bandwidth.

import { getImageUrl } from '@myjsblock/sdk'

const myImage = await getImageUrl('myImageId', {    
    width: 300,    
    height: 300
});

const imageElement = document.createElement('img');
imageElement.src = myImage;

document.body.appendChild(imageElement);

import { getImageUrl } from '@myjsblock/sdk'

const myImageId = 'a181f12c-3116-11e5-80d0-00155d130a43';

const imageSourceDimensions = {    
    '300w': [280, 210],    
    '768w': [748, 561],    
    '1280w': [1260, 945]
};

const imageSourcePromises = Object.values(imageSourceMap).map(([width, height]) => getImageUrl('myImageId', { width, height }));

const imageSourceUrls = await Promise.all(imageSourcePromises);

const imageSourceMap = Object.entries(imageSourceDimensions).map(([viewPortWidth], dimensionIndex) => [viewPortWidth, imageSourceUrls[dimensionIndex]]);
// Returns array of e.g. ['300w', 'https://myasseturl...']

const sourceSet = imageSourceMap.map(([viewPortWidth, imageUrl]) => `${imageUrl} ${viewPortWidth}`).join(', ');

const imageElement = document.createElement('img');

const defaultImage = imageSourceMap[0][1]; // Smallest image
imageElement.src = defaultImage;

imageElement.srcset = sourceSet;

document.body.appendChild(imageElement);

<html>    
    <body>
        <img            
            src="https://static.accept.appmachine.com/api/image/x/a181f12c-3116-11e5-80d0-00155d130a43"            
            srcset="https://static.accept.appmachine.com/api/image/280x210/a181f12c-3116-11e5-80d0-00155d130a43 300w, https://static.accept.appmachine.com/api/image/748x561/a181f12c-3116-11e5-80d0-00155d130a43 768w, https://static.accept.appmachine.com/api/image/1260x945/a181f12c-3116-11e5-80d0-00155d130a43 1280w"        
        />    
    </body>
</html>

Name

Type

Required

Default

imageId

String

✅

dimensions

{ width: Number, height: Number }

Error Code

Description

INVALID_ARGUMENT

imageId is missing or the width or height isn't a number.

Show an overlay with a spinner.

import { showLoader, hideLoader } from '@myjsblock/sdk'const loadData = async () => {  await showLoader()  try {    await fetchData()  } finally {    await hideLoader()  }}

Hide the loader overlay that was shown by the showLoader function.

import { showLoader, hideLoader } from '@myjsblock/sdk'const loadData = async () => {  await showLoader()  try {    await fetchData()  } finally {    await hideLoader()  }}

Error Code

Description

OPERATION_NOT_ALLOWED

There is no active loader.

Error Code

Description

UNKNOWN_ERROR

Unknown error occurred.

TIMEOUT_EXCEEDED

The app failed to respond within the set timeout.

UNKNOWN_FUNCTION

The function that was called doesn't exist.

VERSION_NOT_SUPPORTED

The function isn't supported in the current version of the app.

PreviousSDK NextJS Data

Last updated 2 years ago

Was this helpful?

Core

Core

Get Block Name

Errors

Get Property

Get Block Name

Errors

Get Property

Arguments

Errors

Get Image Url

Image Resizing

Basic Example

Multiple Image sizes

Result

Arguments

Errors

Show Loader

Hide Loader

Errors

Generic errors

Arguments

Errors

Get Image Url

Image Resizing

Basic Example

Multiple Image sizes

Result

Arguments

Errors

Show Loader

Hide Loader

Errors

Generic errors