Set "text" value of Input component from api data

I have data requests working :smile: I am trying to fill an input component with data returned from a REST API. Where is the text field in the input component? I can find the text field in the text field (label) and can do the prefill. I can’t find a “text” field in the Input component.

I am filling in an entry field from an api that retrieves one item with many attributes, not an array of items.

Input component

Text Component

1 Like

I have the same question for the Date Picker and the Calendar components. I can’t find where I can set the value using a date returned from an API.

Hey @sstava, thanks for submitting your ticket, this is one of the most requested parts of Data Connection.
This work is in progress right now, and we anticipate it will be released next week!

How is your overall experience with the platform and especially with data connection?

I spent the weekend building a few examples calling my APIs. It works really well! You have a great combination of visual builder, data connection and the ability to tie them together with actions/steps.

I saw that your data connection came out very recently. It seems really solid :+1:

  1. Do you publish a high-level roadmap of what you are working on and what comes after that?

  2. Having a roadmap, I could better focus my efforts building with what is available (I lost a few hours and some momentum trying to figure out the input/calendar/date picker text issue – I am guessing radio button and checkbox as well?). I could also offer thoughts on how I might use the features you have planned in the roadmap, if that helps.

  3. Do you have an example of a Code action step that you have built so I can get a quick understanding of how to interact with the data and the web app visuals through the Code action step? I am looking to do things like automatically pick the first item in a list that gets loaded from an API. Also, Have a 12 column wide list that when you click on an item it will animate out (from the right) the detail screen and shrink the list to a portion of the page. Generally, just things that add the flair to the web app that are necessary to compete with something that is completely hand-coded

My goal is to be able to build a very functional web app without having to export from UI Bakery and “finish up” the application outside of UI Bakery. It seems like you guys are doing a great job of making this possible :smile:

Great work by the team. Thanks!!

2 Likes

Thanks for your kind words!

  1. We are planning on having it public soon, probably even on this forum if the functionality allows us to vote/discuss the features.

  2. Totally agree.

  3. I’ll answer here but we should have it in the docs soon. If you have an HTTP Step action and Code step as the following one, then in the Code step you can reference the result of the HTTP code as {{result.data}} or {{result.error}}. Then you can use any JS operators to modify, map or sort your data, for example pick the first item from the list:

const list = {{result.data}};
return list[0];

As for the animations - unfortunately they are not supported yet, but you should be able to hide/show some elements using Show Condition property of an element.

1 Like

I’m having the same issue as @sstava, I had to download my code and basically go into the angular component, and add the value with the {{ text$ | async }} to get the value I want to “connect” with my datasource, but I would like to have a better example of how to do it in a better way as the functionality is not yet available

<input nbInput class="account-edit-nit size-xl-medium" placeholder="NIT" **value="{{ text$ | async }}"** type="text" shape="rectangle" status="basic" (input)="updateUiAccountEditNitValue($event)">

Hey @Angel_Vittorio_Lopez, welcome to the community!

We’re working right now on adding this functionality, and it’ll be released in about a week (planning to do it tomorrow if everything goes right), so you’ll have no need soon to do any custom actions for this.

2 Likes

hi, just as a follow-up: will the ability to set values be expanded to all UI components? for example, currently radio buttons cannot be set, just read (using ui.Radio.value)… also, how will it work? will simple assignment work (ie, ui.Radio.value = “xxx”), or will there be some function off of value (ie, ui.Radio.value.set(“xxx”))?

1 Like

Hi @cnordquist,
this will also be included in the today’s release, and we’ll show there later how it works.

did it go well? thank you

@Angel_Vittorio_Lopez just released!

1 Like

I am excited to give it a try. I will set aside some time in the next few days! Thanks for the quick turnaround :+1:

1 Like

super!! this is so useful for me, will try it right away…

1 Like

@sstava @cnordquist @Angel_Vittorio_Lopez
Hey guys, you’ve asked here whether we have a roadmap. Happy to share it with you now: https://roadmap.uibakery.io/home :slight_smile: All the features we’re working on now / are planning to work on in the nearest future are here.

Have a good day!