LogoLogo
HomepageResellerPricingSign in
  • AppMachine
  • πŸ“ƒProduct Updates
  • πŸ‘·Build your app
    • Preview your app
    • App templates
    • App Settings
    • Update payment method
    • Cancel subscription
  • ❔General App Building FAQ
  • How to
  • 🧱Blocks
    • πŸ” Admin
    • πŸ“„Blank Page
    • πŸ“žCall
    • 🏒Contact
    • πŸ“Contact Us
    • 🧾Coupons
    • πŸ“ƒCustom Form
    • πŸ“§Email
    • πŸ—“οΈEvents
    • ❔FAQ
    • 🌐Facebook
    • πŸ•‘Hours
    • ℹ️Information
    • πŸ“£Intro
    • β˜•JavaScript
    • πŸ”’Lock
    • 🎧Music
    • πŸ“°News
    • πŸ“ƒPDF
    • πŸ—ΊοΈPOI
    • πŸ‘₯People
    • πŸ“·Photos
    • 🏬Products
    • πŸ“©Push Messages
    • πŸ“»Radio
    • β†ͺ️Submenu
    • 🐦Twitter
    • πŸ‘¨β€πŸ’»URLs
    • πŸ–₯️Web Page
    • πŸ“ΊVideo
    • πŸ“±WhatsApp
  • πŸ“ƒData
    • Appmachine Data
    • Delete (test) data from Custom Form
    • Google Sheets
    • Web services
  • πŸ–ŒοΈStyle your app
    • Theme
    • Home Screen
    • FAQ Style
  • 🎨Style your screens
    • Elements
  • Share your app
    • ✈️Publishing your app
      • Technical Setup Quick Start Guide
      • Update your app
      • Unpublish an app from the app stores
    • 🌐Web App Publishing
      • Hosting on custom domain
    • 🍏Apple App Store
      • iOS developer account
      • App Store Connect API keys
      • Link your app
      • New app record in App Store Connect
      • App privacy details
      • Edit Store information
      • Fix App publish issues
      • Push certificates
      • App Store Connect app status overview
      • App Store Review Guidelines
      • Publish app Unlisted
      • Accept updated License agreement
      • Apple App Store FAQ
      • iPad
      • Enterprise
        • Setup your Enterprise app
        • Create iOS Distribution Certificate
        • Create App ID
        • Create Mobile Provisioning Profile
        • Downloading and installing an Enterprise app
    • 🍐Google Play
      • Create a Google Developer Account
      • Setup your Android app
      • How to request a Google Maps API Key
      • Test your Android app before publishing to Google Play
      • Upload your Android app to Google Play Store for the first time
      • Update Android app (short)
      • Update an Android app (extended)
      • Data safety details on the Google Play Store
      • Sell your app in Google Play Store
      • Create Google merchant account
      • Force Store Update for your Android App
      • Authorise an additional user to your Google Play developer account
      • What if my app is suspended by Google?
  • App details
    • πŸ•΅οΈGoogle Analytics
      • Google Analytics setup overview
      • Setup iOS analytics
      • Setup Android analytics
      • Inviting a new Google Analytics user
    • πŸ”₯Firebase
      • Create Firebase project
      • Locate Firebase Server key
      • Renew Firebase Server Key
      • Register iOS app
      • Register Android app
      • Enable Cloud Messaging
      • Enable Google Analytics
      • Google Analytics via Firebase
    • πŸ“¨Push notifications
      • Setup Apple Push certificate
    • πŸ§‘β€πŸ€β€πŸ§‘User management
      • Create Apple Sign In key
      • Setup Azure Active Directory
      • Create Facebook App ID Secret
    • 🐦Twitter API keys
    • πŸ”Privacy policy
    • πŸ‘©β€πŸ”§Your Account
      • Account Settings
      • Account FAQ
      • Payment FAQ
    • πŸ“±Admin CMS
  • Developers
    • πŸ‘©β€πŸ’»JavaScript
      • Develop locally
      • SDK
        • Core
        • JS Data
        • Media
        • Navigation
        • Notification
        • User
      • CLI
        • CLI Token and Secret
        • Errors
          • CONFIG_PROPERTIES_INVALID
          • CONFIG_VALUES_INVALID
          • ENTRY_FILE_NOT_FOUND
          • OUTPUT_DIRECTORY_IS_EMPTY
          • OUTPUT_DIRECTORY_NOT_FOUND
          • TOKEN_SECRET_NOT_PROVIDED
          • TOKEN_SECRET_NOT_VALID
      • Migrate from old Custom JS
    • πŸ’»Web services
Powered by GitBook
On this page
  • Setup your project (e.g. with Vite)​
  • Installation​
  • Before we begin​
  • Your first function​
  • Publish it with the CLI​

Was this helpful?

  1. Developers
  2. JavaScript

SDK

@myjsblock/sdk

PreviousDevelop locallyNextCore

Last updated 2 years ago

Was this helpful?

A guide to start with the MyJSBlock SDK. For a quick introduction we suggest reading our .

Setup your project (e.g. with Vite)

We recommend using a build tool like , it is an easy to use development tool for all kinds of frameworks. It also has support for creating PWAs and more. It is not required, you can also use your own setup.

With npm:

npm create vite

With yarn:

yarn create vite

After a couple of questions Vite will create a starter project for you. If you just want use regular JavaScript you can choose 'vanilla'.

Installation

NPM

npm install @myjsblock/sdk

Yarn

yarn add @myjsblock/sdk

In JavaScript you're able to call functions that will interact with your AppMachine App. Simply import the function and call it.

HTML

<body>  
    <button id="loader-button">    
        Show Loader  
    </button>
</body>

JavaScript

import { showLoader, hideLoader } from '@myjsblock/sdk'

const loadingButton = document.getElementById('loader-button');

loadingButton.addEventListener('click', async () => {  
    await showLoader();
    await new Promise((resolve) => { setTimeout(resolve, 2000) });
    await hideLoader();
});
myjsblock link
myjsblock link

Before we begin

All the modules the SDK exposes are functions, every function in the SDK returns a promise. If you're not familiar with Javascript Promises checkout .

Your first function

Example

See this example on .

Publish it with the CLI

If you haven't installed the CLI yet, follow the steps in our .

Link your project to a block

Push your project

πŸ‘©β€πŸ’»
introduction
​
Vite
​
​
​
​
this page on MDN
​
​
GitHub
​
Getting Started
​
​