Microsoft MakeCode

Dynamic define blocks

Hi,there!
I am new to pxt framework and I’ve found that the document for this framework is a little rare,I must dig into the source code to achieve what I want.
I wonder if there is a way to define blocks dynamiclly?For example,I want to show diffrent blocks when different people open the editor.how can I achieve that?can any of you give me someadvice?Thanks.

@ richard
I am so sorry to bother you,but I really don’t know where to ask for help,I hope you can give me some advice,best regards :blush:

@FBplus I’m not entirely sure I understand what you mean. Are you creating your own pxt editor? What kind of blocks are you making and what aspect of them do you want to customize?

@richard Thanks so much for your reply :smile:
I am creating my own pxt target like pxt-sample. I know I can modify the api.ts to define the blocks to be shown in the editor,but that’s not enough.
I‘ve build the editor using “pxt staticpkg” and self host the website but I want to dynamiclly change the blocks to be shown in the editor.for example,if I add a suffix to the url like “&level=primary”,I only want the users to see and use the primary blocks,if the suffix is “&level=advanced”,the users should only see the advanced blocks.
Furthermore, I wonder if there is a way to dynamiclly define the blocks at backend,so every time I open the editor,I can get a setting file from the backend and show the blocks according to that file.I don’t know if that’s possible since I know almost nothing about the building process or the file structure.
I am not a native speaker and I found the lack of docments is even more difficult for me to achieve what I want.And I really don’t know where to start.I hope you can give me someadvice and sorry for my bad english.

Hmm… There isn’t an easy way to do that unfortunately.

The (somewhat complicated) way to do that would be to use our iframe messaging protocol. Basically, you can embed an iframe that points to your editor. When it’s embedded correctly, the inner page will not save projects in indexedDB anymore and instead send messages to the outer page to save/read projects. You’ll have to write your own code to save/read projects, but this will also give you the ability to patch those projects when they are read and change the blocks that show up.

The setup would be something like this:

  1. You create an extension for each set of blocks you’re making
  2. You host your editor as you are doing now
  3. You create another page that embeds your editor in an iframe
  4. In the outer page, you add some JavaScript that implements a workspace for the iframe that saves and loads projects
  5. When you get a request to load a project, you patch the project’s pxt.json to include a reference to the appropriate package
  6. When you get a request to save a new project, you can patch it and then send an iframe message to force the editor to load the new version

The iframe workspace stuff isn’t super well-documented, but you can find an example in controller.html in the pxt repo: https://github.com/microsoft/pxt/blob/master/webapp/public/controller.html

If you do a local serve, change the localhost URL to be localhost:3232/controller.html to load that page. All of the iframe messages are defined in this file

1 Like