Candid UI has a new look!

Developers
1

Hello community,

In case you missed it in the 0.6.20 release notes this week, the Candid web interface went through a redesign! New features and improvements include:

  • A new Console drawer provides quick access to method output and a list of all available methods as links for fast navigation.
  • Canister methods and their related form elements are more clearly separated and annotated.
  • Method output is selectable and easier to toggle between text, UI, and JSON formats.
  • The layout is now responsive to provide an optimized display when viewing service using mobile devices or other media.

Check out the before and after! :star_struck:

Screen Shot 2021-01-29 at 2.13.17 PM
Screen Shot 2021-01-29 at 2.13.17 PM2120×986 162 KB

Hope you’ll give it a try, and we’ll be reaching out for your feedback in the coming weeks. Cheers!

13 Likes
2

Good job to whatever suave individuals made this look so much better!

5 Likes
3

Hey Alexa this looks fantastic!

I was wondering the following. I currently have the following functions in my canister .did

type Prediction = 
 record {
   hash: nat32;
   predictionMade: int;
   predictionRevealed: opt int;
   predictionText: opt text;
   title: text;
 };
service : {
  create: (text, nat32) -> (opt Prediction);
  getAllPredictions: () -> (vec Prediction);
  revealPrediction: (text) -> (bool);
}

I’m not exactly sure how to call create: (text, nat32) however from javascript. calling it with a number or Nat32.encodeValue(1) didn’t work. The type signature in motoko is.

public func create(title: Text, hash: Word32) : async ?Prediction

When looking at the Candid documentation page: I see a TODO under the header.

“Use Candid for a JavaScript front-end”

The link that is in there refering to a github repository gives a 404.

Am I supposed to see my create: (text, nat32) → (opt Prediction), getAllPredictions: () → (vec Prediction), revealPrediction: (text) → (bool) functions in the candid UI?

Calling getAllPredictions() in my frontend code correctly gives back an empty array. I currently only see a retrieve(), authorize(), list() and store() functions when I go to the candid UI (currently on 0.6.21)

Edit: nvm calling create with just a normal number seems have worked I think none the less interacting with these functions through the candid UI would be great if that is what is supposed to happen.

4

These methods should show up in the Candid UI, at http://127.0.0.1:8000/candid?canisterId=<your-canister-id>

5

Yes, thats the url I’m looking at. Currently I only see

authorize : (principal) → ()
list : () → (vec text) query
retrieve : (text) → (vec nat8) query
store : (text, vec nat8) → ()

even though when I call the functions from the frontend they do seem to work.

EDIT: nvm figured it out. you have to use the motoko canister ID not the frontend canister id

EDIT2: It seems that the random button only uses random values for values that are not already filled in. This fact could probably be improved with some visual feedback e.g filling in the random values in the input field with a light grey or something

2 Likes