[Sell] Drag & Drop UI Builder...Now with CSS & Jquery

[darryl561 177]

Nice One Man 

 

Does it Support Arabic characters ( Unicode ) ?

 

Hi abufahad,

 

the ui builder was built with ubot, so if ubot supports those characters then the ui builder should as well.

 

Hope that helps

Darryl.

[abufahad5050 0]

Thanks

[darryl561 177]

There are now two versions of the Drag & Drop UI Builder available.

 

UI Builder Lite and UI Builder Pro.

 

See first post of this thread for details.

 

Cheers

Darryl.

[darryl561 177]

Had a question from a customer the other day that I thought I would share here as it may be helpful to others.

 

They had a list of sites, and needed a checkbox and stat monitor for each site to display in the ui. The problem was the list had far too many sites to be displayed in the ui so they wanted to know if it was possible to add them to a scroll box inside the ui with the ui builder.

 

Here's a screenshot of an example of what he wanted:

 

http://77thcloud.com/uibuilderpro/salesthread/scrollui.png

 

Although the scroll box had to be manually created it was relatively easy to do.

 

If anyone else wants to know how to do this I made a screencast for him here: http://screencast.com/t/SWUeXgK0

 

Below is the code I used for the example scroll box above, which I added to the builder via the custom code option if anyone wants to try it out

 

Cheers.

 

.

<section style="width:250px; height: 300px; overflow-y: auto;">
<table
 style="text-align: left; background-color: #ccC7BC; width:233px; height: 300px;"
 border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top;">

<!--next site-->

<p><input type="checkbox" variable="#site1" fillwith="checked" id="site 1">
           <label for="site 1">site 1</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite1" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site2" fillwith="checked" id="site 2">
           <label for="site 2">site 2</label></p>  
   
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite2" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site3" fillwith="checked" id="site 3">
           <label for="site 3">site 3</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite3" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->


<p><input type="checkbox" variable="#site4" fillwith="checked" id="site 4">
           <label for="site 4">site 4</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite4" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site5" fillwith="checked" id="site 5">
           <label for="site 5">site 5</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite5" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site6" fillwith="checked" id="site 6">
           <label for="site 6">site 6</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite6" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site7" fillwith="checked" id="site 7">
           <label for="site 7">site 7</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite7" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site8" fillwith="checked" id="site 8">
           <label for="site 8">site 8</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite8" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site9" fillwith="checked" id="site 9">
           <label for="site 9">site 9</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite9" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site10" fillwith="checked" id="site 10">
           <label for="site 10">site 10</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite10" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site11" fillwith="checked" id="site 11">
           <label for="site 11">site 11</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite11" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site12" fillwith="checked" id="site 12">
           <label for="site 12">site 12</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite12" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site13" fillwith="checked" id="site 13">
           <label for="site 13">site 13</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite13" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site14" fillwith="checked" id="site 14">
           <label for="site 14">site 14</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite14" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site15" fillwith="checked" id="site 15">
           <label for="site 15">site 15</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite15" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site16" fillwith="checked" id="site 16">
           <label for="site 16">site 16</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite16" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site17" fillwith="checked" id="site 17">
           <label for="site 17">site 17</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite17" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site18" fillwith="checked" id="site 18">
           <label for="site 18">site 18</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite18" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>

<!--next site-->

<p><input type="checkbox" variable="#site19" fillwith="checked" id="site 19">
           <label for="site 19">site 19</label></p>
     
<font style="font-family: Georgia; font-size: 15; color: #11910D;">status:</font> 
<font variable="#watchsite19" fillwith="innertext" class="style1" style="color: #C70606; border: 0px solid #FFFFFF;  
background-color: #; "></font>
<br>


</td>
    </tr>
  </tbody>
</table>
</section>

[beatngu 65]

Hi Darryl,

I have a small request,can you please add a icon to the Ui builder next update?

It's not a big thing but i got about 4 bots with no custom icon and i keep clicking on the wrong ones,lol

[Walter1 8]

Hi Darryl,

 

 

As you know i effin' love this tool you made but i have a question.

 

Is it possible in some way that if a user selected a option in my bot, or clicks a button, a new field/option will appear in the front end of the bot?

 

Now i have to include all options and fields and it looks 'full'. I know about the tab thingy  but thats not what i want.

 

 

Regards,

 

Walter

[darryl561 177]

Hi Darryl,

I have a small request,can you please add a icon to the Ui builder next update?

It's not a big thing but i got about 4 bots with no custom icon and i keep clicking on the wrong ones,lol

 

Yeh no worries, should be able to add that.

 

Hi Darryl,

 

 

As you know i effin' love this tool you made but i have a question.

 

Is it possible in some way that if a user selected a option in my bot, or clicks a button, a new field/option will appear in the front end of the bot?

 

Now i have to include all options and fields and it looks 'full'. I know about the tab thingy  but thats not what i want.

 

 

Regards,

 

Walter

 

Yeh someone else asked the same thing a while back, at the time I could'nt work out how to add that feature to the builder, but I might have another look at it and see if I can come up with something, can't promise anything though.

 

Cheers.

[Walter1 8]

Hi Darryl,

 

 

Thanks for taking a look at it, appreciated.

 

Walter

[darryl561 177]

Hi Darryl,

 

 

As you know i effin' love this tool you made but i have a question.

 

Is it possible in some way that if a user selected a option in my bot, or clicks a button, a new field/option will appear in the front end of the bot?

 

Now i have to include all options and fields and it looks 'full'. I know about the tab thingy  but thats not what i want.

 

 

Hi Walter,

 

this feature will be added soon. I plan to have an update ready sometime on the weekend that will include the option to add hidden fields.

 

Also I have been considering looking into adding an option to create tables. One use for this would allow a user to take results that have been scraped from a site into list's,  and display them in a table in the ui.

 

This may be a bit tricky and time consuming to add and I'm not even certain that I can add it yet, so I'm not really keen to attempt it unless there are a few that would like to see this feature, so please let me know if this is something that you would like to see added.

 

Cheers.

[Marton 48]

Hi Walter,

 

this feature will be added soon. I plan to have an update ready sometime on the weekend that will include the option to add hidden fields.

 

Also I have been considering looking into adding an option to create tables. One use for this would allow a user to take results that have been scraped from a site into list's,  and display them in a table in the ui.

 

This may be a bit tricky and time consuming to add and I'm not even certain that I can add it yet, so I'm not really keen to attempt it unless there are a few that would like to see this feature, so please let me know if this is something that you would like to see added.

 

Cheers.

 

Hi Darryl! I would love to see that feature too! Good luck with the development if you decide to give it a go!

 

Thank you, keep up the good work & all the best,

Marton

[Walter1 8]

Hi Darryl,

 

 

Well personally i would like to see the add/remove remove function for elements since the other idea can be accomplished trough adding the code in the builder anyways, only not sorted trough a table though.

 

As already said, loving your work and support man.

[darryl561 177]

Hi Darryl,

 

 

Well personally i would like to see the add/remove remove function for elements since the other idea can be accomplished trough adding the code in the builder anyways, only not sorted trough a table though.

 

As already said, loving your work and support man.

 

Yeh adding tables or pretty much anything can be added to the ui using the custom code option. I'm not sure if everyone realizes just how versatile that option is and that almost anything can be added to the ui by using it. I know that users have added things like youtube videos and Dankass's free html5 progress bar with that option.

 

About the add/remove, I assume you mean improving on it, as that option is already there. I have not been able to figure out a better way of doing it though.

 

Cheers.

[Walter1 8]

Hi Darryl,

 

 

Yeah the option to insert your own code is just a great addition to the whole tool, allowing you to insert your own scripts. Just awesome

 

Uhm regarding the other option, I did not know there was already a option to do this?

Say i select something from a dropdown that requires more or less UI txt fields. How would i be doing that since i thought there was no option for doing this?

 

Walter

[kev123 132]

Tables would be great the issue with the current basic table you can add it ubot using a variable is you can add basic styling but as soon as you try and add Java and advanced CSS such as sort,sort by drop down,filters,display amount per page etc it becomes difficult I,m yet to come up with something that can incorporate all the above

[Walter1 8]

Hi Darryl,

 

Ait, i just found the the normal and disable options but thats not quite what i meant. Now, for instance, the textbox is disabled.

 

What i meant was completely remove the textbox.

 

Sorry for the language barrier lolz...

[darryl561 177]

Hi Darryl,

 

 

Yeah the option to insert your own code is just a great addition to the whole tool, allowing you to insert your own scripts. Just awesome

 

Uhm regarding the other option, I did not know there was already a option to do this?

Say i select something from a dropdown that requires more or less UI txt fields. How would i be doing that since i thought there was no option for doing this?

 

Walter

 

Hi Walter,

sorry I misunderstood you. You are correct the option to show/hide fields is not there yet, but I will be putting out an update in the next couple of days with that feature added. You will be able to activate the show/hide with either a button or switch though, not the dropdown.

 

Tables would be great the issue with the current basic table you can add it ubot using a variable is you can add basic styling but as soon as you try and add Java and advanced CSS such as sort,sort by drop down,filters,display amount per page etc it becomes difficult I,m yet to come up with something that can incorporate all the above

 

Hi Kev,

what you are suggesting here would be great, but is beyond my capabilities unfortunately.

 

Hi Darryl! I would love to see that feature too! Good luck with the development if you decide to give it a go!

 

Thank you, keep up the good work & all the best,

Marton

 

Hi Marton,

I'm thinking it's probably not worth doing, as I think it will probably be just as easy to create a table with any free html editor and add it to the builder with the custom code option. Either way you would still have to code your bot to create a table for updating anyway.

 

I am happy to help if anyone needs any assistance getting a table setup.

 

Cheers.

[darryl561 177]

Have just put out an update with 2 new features.

 

New Feature 1:

The option to add hidden fields that you can assign to appear on either a button click or by clicking the iphone style switch.

 

If you use a button you can set it so that the button text will also change when it is clicked. eg. "More Options" can be changed to "Less Options".

 

With the switch the hidden fields will appear when it is switched to "On".

 

New Feature 2:

Added a new option to add a progress bar. I have utilized Dankass's Free html5 progress bar so thanks to Dankass and I hope you don't mind.

 

The builder will create the code so that it will only become visible when the button that runs the define command it is located in is clicked, and will disappear once it reaches 100%(it can easily be made to stay visible if you prefer).

 

Example code is also created by the builder but you will obviously have to create your own code to get it working for your bot.

 

Click the image below for a quick(1 minute) demo:

 

http://77thcloud.com/uibuilderpro/salesthread/demo.png

 

 

Also here is a link that shows how the hidden fields and progress bar are added:

 

http://screencast.com/t/7wRB56GbqR

 

Hopefully you will enjoy the new features.

 

Cheers

Darryl.

[Aymen 385]

Thx For the great update Darryl!

[Walter1 8]

Hi Darryl!

 

 

Man all i can say is just WOW. Another great update of this ubercool piece of software!

[beatngu 65]

Another great update Darryl!!

You forgot about the icon mate 

[darryl561 177]

Thanks for the good words guys, it's appreciated.

 

The hidden fields was a good suggestion Walter, so thanks to you and Josh for suggesting it.

 

Actually I did add an icon Alex,   if you open the "dragndrop" folder you will see the exe has the new icon.

 

You can download the icon with the link below and add it to the "dragndrop" folder if you want, then change the icon for the desktop shortcut to that one.

 

Get Icon

 

Cheers

Darryl.

[beatngu 65]

Thanks Darryl,you where right!

It was windows that did not update the icon,so after i opened the folder with the drag and drop builder it updated the icon automatic on my task bar.

[Marton 48]

When adding a UI that has hidden fields to a tab (when creating UI with multiple tabs), the hidden fields don't seem to work anymore. (otherwise they work just fine, when I don't have tabs).

 

Is there a way to fix this, Darryl? Thanks!

[darryl561 177]

When adding a UI that has hidden fields to a tab (when creating UI with multiple tabs), the hidden fields don't seem to work anymore. (otherwise they work just fine, when I don't have tabs).

 

Is there a way to fix this, Darryl? Thanks!

 

Hi Marton, thanks for pointing that out.

 

I will get that fixed as soon as I can. Will let you know here when it's fixed.

[darryl561 177]

New UI Builder Update!

 

Fixed an issue where hidden fields did not work when used with tabs. They are working when using tabs now.

 

To receive this update it is necessary to download and run the installer again.

 

You will find the download link in the "Changelog" next time you run the builder, and I will also be sending an email with the link to everyone.

 

Cheers

Darryl.