Links
Comment on page

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 generic errors:
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);
});

Arguments

Name
Type
Required
Default
propertyName
String
-

Errors

Here is a list of errors that can be thrown when calling this function in addition to generic errors:
Error Code
Description
INVALID_ARGUMENT
The provided propertyName is not found.

Get Image Url

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);

Image Resizing

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.

Basic Example

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);

Multiple Image sizes

It is also possible to use multiple image resolution depending on the device resolution or pixel density using image src sets. Read MDN guide for more information.
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);

Result

<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>

Arguments

Name
Type
Required
Default
imageId
String
-
dimensions
{ width: Number, height: Number }
-

Errors

Here is a list of errors that can be thrown when calling this function in addition to generic errors:
Error Code
Description
INVALID_ARGUMENT
imageId is missing or the width or height isn't a number.

Show Loader

Show an overlay with a spinner.
import { showLoader, hideLoader } from '@myjsblock/sdk'const loadData = async () => { await showLoader() try { await fetchData() } finally { await hideLoader() }}

Hide Loader

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() }}

Errors

Here is a list of errors that can be thrown when calling this function in addition to generic errors:
Error Code
Description
OPERATION_NOT_ALLOWED
There is no active loader.

Generic errors

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.
Last modified 1yr ago