T The Draftbit Community
Home
Discussion
๐Ÿ™‹ Ask for Help
Product
๐Ÿš€ What's New?
Knowledge Base
๐Ÿ“š Getting Started ๐ŸŽ“ Tutorials
Private Groups
๐Ÿ”ฅ Firebase ๐Ÿ” Authentication โš›๏ธ Custom Code
Links
My Draftbit Account โ†— Documentation โ†— Roadmap โ†— Example Screens โ†— Starter Apps โ†— Email Us ๐Ÿ“ง
       Log in   Sign up
    • Log in
    • Sign up
    Home
    Discussion
    ๐Ÿ™‹ Ask for Help
    Product
    ๐Ÿš€ What's New?
    Knowledge Base
    ๐Ÿ“š Getting Started ๐ŸŽ“ Tutorials
    Private Groups
    ๐Ÿ”ฅ Firebase ๐Ÿ” Authentication โš›๏ธ Custom Code
    Links
    My Draftbit Account โ†— Documentation โ†— Roadmap โ†— Example Screens โ†— Starter Apps โ†— Email Us ๐Ÿ“ง

    Home

    Latest
    • Latest

      Show the newest posts first
    • New activity

      Show posts with latest comments first
    • Oldest

      Show the oldest posts first
    • Popular

      Show the most engaging posts first
    • Likes

      Show posts with most likes first
    admin

    Brian Luerssen

    Joined Aug 31, 2020
    CEO, Draftbit
    Chicago
    ๐Ÿ‘‹
    Brian Luerssen
    Posted in Ask for Help

    Hey I'm Brian, CEO of Draftbit. AMA!

    Hey everyone! I'm Brian, one of the co-founders of Draftbit. I've worked in startups for the past 20 years, founding multiple companies and investing in more. I live in Chicago and love helping people turn their ideas into reality.

    So -- please feel free to ask me anything about Draftbit, no-code/low-code, startups, etc!

    (I'll be following this thread for the next few days. It may take me a few hours to respond to your questions.)
    Liked by Aman and 5 others
    Like Comment
    10 comments

    Shannon Duncan

    Joined Apr 13, 2021
    CTO - Shadow Startup
    Conway, AR
    ๐Ÿงช
    Shannon Duncan
    Posted in Ask for Help

    Top Bar

    How do we get rid of the top bar shown here?

    ๏ปฟ
    ๏ปฟ
    0
    Like Comment
    2 comments

    Shannon Duncan

    Joined Apr 13, 2021
    CTO - Shadow Startup
    Conway, AR
    ๐Ÿงช
    Shannon Duncan
    Posted in Ask for Help

    Realtime Data - Firebase

    We have a new item on the product backlog that is to add realtime data binding to the firebase integration. If you are interested in this as well, please take a moment and upvote the roadmap item!

    https://roadmap.draftbit.com/features/p/firebase-realtime-database
    Liked by Nick and 1 other
    Like Comment
    3 comments

    Shannon Duncan

    Joined Apr 13, 2021
    CTO - Shadow Startup
    Conway, AR
    ๐Ÿงช
    Shannon Duncan
    Posted in Ask for Help

    Button Margin Causes background to be wonky

    Why would setting a button's margin cause this white space around it? Can't see anything in the screen code to suggest it's right...

    ๏ปฟ
    ๏ปฟ
    ๏ปฟ
    ๏ปฟ
    ๏ปฟ
    ๏ปฟ
    ๏ปฟ
    ๏ปฟ
    0
    Like Comment
    5 comments

    Shannon Duncan

    Joined Apr 13, 2021
    CTO - Shadow Startup
    Conway, AR
    ๐Ÿงช
    Shannon Duncan
    Posted in Ask for Help

    Blocks Source Code

    Are the blocks provided in the editor available to look at how they are built? For example I'd like to create a different version of the button that has an Icon on the right vs the left, and I'd like to do it in the same fashion as the current button is created.

    I can create a "fake" button by containers, text, and icons. But would like to make it as close to what ya'll have already as possible.
    0
    Like Comment
    4 comments

    Paul Ourada

    Joined Apr 12, 2021
    Owner, 4Bablio
    Longmont, CO
    Paul Ourada
    Posted in Ask for Help

    DatePicker-Underline runtime error

    I did a search here and didn't find this particular issue with DatePicker. I am getting a strange error when I use DatePicker on an actual device. I don't think I'm doing anything strange with it.ย 

    In code it looks like this:
    <DatePicker
        style={styles.DatePickerJz}
        label="Birth Date"
        mode="date"
        leftIconMode="inset"
        type="underline"
        date={birthDate}
        onDateChange={birthDate => setBirthDate(birthDate)}
        error={true}
    />
    birthDate is a state variable and on initialization is set to undefined. I get the following error when rendering BabyDetailsScreen, where DatePicker is used:
    TypeError: null is not an object (evaluating 'date.getMonth')
    
    This error is located at:
        in DatePicker (created by Context.Consumer)
        in ThemedComponent (created by withTheme(DatePicker))
        in withTheme(DatePicker) (at BabyDetailsScreen.js:201)
        in RCTView (at View.js:34)
        in View (at BabyDetailsScreen.js:108)
        in RCTView (at View.js:34)
        in View (at ScrollView.js:1124)
        in RCTScrollView (at ScrollView.js:1260)
        in ScrollView (at ScrollView.js:1286)
        in ScrollView (at BabyDetailsScreen.js:103)
        in RCTView (at View.js:34)
        in View (at ScreenContainer.tsx:62)
        in RCTView (at View.js:34)
        in View (at SafeAreaView.js:41)
        in ForwardRef(SafeAreaView) (at ScreenContainer.tsx:53)
        in ScreenContainer (created by Context.Consumer)
        in ThemedComponent (created by withTheme(ScreenContainer))
        in withTheme(ScreenContainer) (at BabyDetailsScreen.js:83)
        in BabyDetailsScreen (created by Context.Consumer)
        in ThemedComponent (created by withTheme(BabyDetailsScreen))
        in withTheme(BabyDetailsScreen) (at SceneView.tsx:122)
    *NOTE:* When I set the date prop directly to undefined, DatePicker works normally, only I can't see the new date set because it's not being captured in the date prop.

    The only way I have been able to get this to work is the following:ย 
    const [birthDate, setBirthDate] = React.useState(new Date().toISOString());
       :
    // make certain to not overwrite birthDate with invalid ISO // date string in useEffect() data fetches from DB
       :
        <DatePicker
            style={styles.DatePickerJz}
            label="Birth Date"
            mode="date"
            leftIconMode="inset"
            type="underline"
            date={new Date(birthDate)}
            onDateChange={newBirthDate => setBirthDate(newBirthDate)}
            error={!isEmpty(birthDate)}
        />
    
    If the date prop is not set to a Date object or undefined, then I get some form of the error above. It seems to me that DatePicker should be able to create a Date object from a string passed into the date prop. Is this documented somewhere? Where is the documentation for @draftbit/ui?

    Thanks,
    Paul
    0
    Like Comment
    3 comments
    admin

    Aman Mittal

    Joined Mar 9, 2021
    Dev Advocate | amanhimself.dev
    New Delhi
    ๐Ÿ‘‹ ๐Ÿงช
    Aman Mittal
    Posted in Tutorials

    Build the Bookbit app from scratch - Part 3: Navigating to a details screen

    In the previous post on creating a Bookbit Starter app from scratch, we focused on fetching real-time data from a REST API endpoint and implementing UI elements such as image, vertical and horizontal scrollable lists.

    In this tutorial, let's extend the Bookbit app by creating a Book Profile screen such that when a user wants to view the details from the Discover Books screen, they can tap the book thumbnail to navigate to the book's profile screen, where they will find the details in the form of its title, name of the author who wrote it, description, quotes from the book and a FAB button that leads to a purchase link for the book.

    Here is what we are building:
    ๏ปฟ
    ๏ปฟ

    Create a Book Profile screen

    The screen we are building in this tutorial is called Book Profile. It will be composed of two main elements. The first element is to add UI elements such as ScrollView and Fetch to organize a layout to display data. The second element is to show the data fetched for a specific book item only when its id passed while navigating from the parent screen or, in Bookbit's case, Discover Books screen.

    The Layout of the Book Profile screen is composed of the following elements:

    • ScrollView
    • ImageBackground
    • Fetch
    • View
    • Image
    • Text
    • Container
    • FAB
    We will not be covering every layout element in detail since they have already been covered in the previous tutorial.

    Add a scrolling view

    The first two UI elements in the Book Profile screen are ImageBackground and ScrollView.

    • Open the workspace in the Draftbit Builder, then open the app you are building.
    • Add a new Blank screen using the plus icon button in the left panel and call it Book Profile.
    • The contents of this screen are going to be wrapped inside a scrollable view. Add ScrollView from the Layout component.
    • Add a background image using the ImageBackground Media component and change Source type to static for it from the Configs tab of the Properties panel on the right side to choose a custom background image.
    ๏ปฟ
    ๏ปฟ
    On the ImageBackground component set the following padding properties from the Style tab:

    • top: 34
    • bottom: 34
    • left: 32
    • right: 32
    ๏ปฟ
    ๏ปฟ
    • Then, add a View as the child of the ImageBackground component. Set the Align property on the View to center and set the height to 100%.
    • Add Fetch component as a child to this View. It will be responsible for fetching the data once we enable the navigation from the API endpoint.
    • Inside the Fetch, add another View that will act as a container for the content to be displayed on the Book Profile screen.
    ๏ปฟ
    ๏ปฟ
    After this step, here is how the Layout of the screen will look like:
    ๏ปฟ
    ๏ปฟ

    Add an image component to display the book cover

    • Start by adding a View component as a child to the last View created in the previous step. This new View component will be displayed, the book cover image, the book's title, and the author's name.
    • In the Styles tab in the Properties panel, under Flex Items set the value of Align property to center. Then, add a padding-top and padding-bottom of 34.
    • Inside this View, add a Container component with margin-bottom of 24, width of 120 and height of 190, and set the value of Overflow to hidden. In the Configs tab, set the value of Elevation property to 3.
    • Add an Image component as the child to the Container with a width of 120 and height of 190.
    ๏ปฟ
    ๏ปฟ
    • Adjacent to Container, add another View component that will contain Text components to display the title and the author's name.
    • For this View, in the Styles tab, under Flex Items set the value of Align property to center, and set padding-top and padding-bottom to 24.
    • Add two Text components to this View as children.
    • The first Text component will display the title of the book. In the Styles tab, set the Font Size to 28, set Color to Custom, and set the margin-bottom to 8.
    • For the second Text component, set the font set Color to Strong.
    ๏ปฟ
    ๏ปฟ
    We do not have any data to display. Let's add that first in the next section.


    Passing data from one screen to another

    Draftbit uses the react-navigation library under the hood to let you implement different navigation patterns such as Stack, Tab, etc. A feature of this library allows us to pass data from one screen to another as parameters. In our Bookbit app, we need to pass the ID of the book displayed on the Discover Books screen such that when a book thumbnail is pressed, a user can navigate to the Book Profile screen in the app to see the details of the book. To ensure that the information displayed is correct when book is selected, the ID of the book item is used.

    In the previous tutorial, we created an API endpoint in Draftbit to fetch the book of the day. The endpoint URL accepts the ID of the book to fetch a book item by its id. We can also use the same endpoint to fetch the data of an individual book item to display on the Book Profile screen based on the ID of the book passed from the Discover Books screen.

    To enable this, go to the Discover Books screen and add Navigation action on Touchable components under the following sections displayed on the screen:

    • Book of the day section
    • Trending list
    • New Books list
    Assign a navigation action to all of these Touchable components:

    • Select the Touchable in the Layout Tree.
    • Go to the Interactions tab of the Properties Panel and click the '+' icon next to the 'Action' section.
    • Select the Navigation action, then in the Basics section, select the Destination screen to navigate, in this case, Books Profile.
    • In the Pass Data section, click the '+' icon, add id as the key and select the ID from the API endpoint, which is of format: Endpoint Name/id (fetch data).
    ๏ปฟ
    ๏ปฟ
    In the Book Profile screen:
    • Go to the Fetch component, go to the Data tab in the Properties panel.
    • In the Setup section, select the Service name that is the REST API service. Then, select the Endpoint, which is to fetch a single book item.
    • In the Configuration section, at the URL Structure, select the id (navigation) as the value for ID key.
    ๏ปฟ
    ๏ปฟ
    • To display the data on the Image component, go to the Data tab in the Properties Panel, change the Source Type to Data, and select the image_url variable. Image component supports three type source types:
      • Static used to display an image from a static asset.
      • Remote URL (default option) used to display an image from a URL. Data used to map the image's source to the key in API endpoint such as image_url in the current example.
    • Next, add a variable to display the title of a book from the API endpoint. Text component supports static text and dynamic values using {{varName}} format. For the Book Profile, select the {{getBookOfTheDayTitle}} to display the title.
    • For the author's name, set it to variable By {{getBookOfTheDayAuthors}}. The prefix "By" remains static and is followed by the author's name from the API endpoint, which is dynamic.
    ๏ปฟ
    ๏ปฟ

    Add the description section

    To add the description section, follow the steps below:

    • Start by adding a View component adjacent to the View that wraps the image, title, and author's name.
    • In Styles tab, set the padding-top and padding-bottom values to 24. In the Size section, set width to 100%.
    • Add two Text components inside it.
    • For the first Text component, set the font size to 20 and a margin-bottom of 8 in the Styles tab. In the Data tab, set a static text value of About this book in the Input Text section. This component acts as the header of the section for a book's description.
    • For the second Text component, in the Data tab, set the value of the variable {{getBookOfTheDayDescription}}.
    ๏ปฟ
    ๏ปฟ

    Add the quotes section

    After the description, let's display a quote section where three quotes are displayed from the book.

    • Add a View component adjacent to the two previous View components. In the Styles tab, set margin-top to 34, margin-bottom to 64, and padding-top and padding-bottom to 24.
    • Add a Container inside it. In the Styles tab, set padding-top and padding-bottom to 18, padding-left and padding-right to 4, and a margin-bottom to 34. In the same tab, set its Color to Background from the drop-down menu. Remove any default value for height property. In the Configs tab, set the value of the Elevation property to 3.
    • Add a Text inside the Container. In the Styles tab, set its Align property value to center, set margin-top and margin-bottom to 6 and set the font-size to 22 . In the Data tab, set the value of the variable to {{getBookOfTheDayQuote1}}.
    • The next two Contains are going to have the same styles properties. The Text component wrapped inside each of the components will differ in the dynamic value for quotes. These values are such as {{getBookOfTheDayQuote2}} and {{getBookOfTheDayQuote2}}.
    • Instead of creating these two Containers on your own and then go through the whole process, you can save the first Container component and its contents as a Custom Block by clicking the "..." icon on the component and then click the Save Custom Block. Add a name for the Custom Block and then click Save.
    • To add a Custom Block, click the "+" icon on the parent View component, go to Saved block components, and select the component name you just saved.
    ๏ปฟ
    ๏ปฟ

    Add a FAB button

    A FAB, or Floating Action Button, represents the screen's primary action and is normally positioned above the rest of the screen's content. In Draftbit, you can configure a FAB by setting the text to be displayed on the button, setting or changing the color of the button, or adding an icon. There are four types of FAB available in Draftbit:

    • FAB Mini
    • FAB Fixed
    • FAB Outline
    • FAB extended
    The difference between each type varies in their appearance properties.

    • Adjacent to the ScrollView component, add a FAB Fixed.
    • In the Styles tab, select the value for Position to be absolute. Also, set the value for left, right, and bottom properties to 32.
    • In the Config tab, change the value of the Label to "Buy this book".
    • In the Interactions tab, add an action by clicking the '+' icon next to the 'Action' section. Select the "Open Site in Browser" from the menu.
    • Add a mock URL for the Destination property such that when a user taps this button, it will open a link in the webview.

    Here is the final output:
    ๏ปฟ
    ๏ปฟ

    Further reading

    • Types of actions available in Draftbit
    0
    Like Comment
    0 comments

    Shannon Duncan

    Joined Apr 13, 2021
    CTO - Shadow Startup
    Conway, AR
    ๐Ÿงช
    Shannon Duncan
    Posted in Ask for Help

    Browser Only App

    We are loving draftbit so far for building mobile PWA and React Native apps. What we'd like to know is how to format a project for a non mobile aspect ratio. It looks like the designer only allows for building mobile aspect ratios, but the technology seems like it would work great for just web apps. Is there a way to unlock the aspect ratio from mobile to web in the designer?

    Thanks!
    0
    Like Comment
    4 comments

    Indrek Peenmaa

    Joined Nov 20, 2020
    CEO at LikeaLocalGuide.com
    Tallinn, Estonia
    Indrek Peenmaa
    Posted in Ask for Help

    A way to import Algolia React InstantSearch library to Draftbit

    Hi

    I am a no code developer and try to understand if there is a way to get one external component to Draftbit.

    Basically I try to use Algolia Search UI to show indexed search results from Algolia. The instructions are here. Can anybody explain what is the way to integrate it to Draftbit?

    Regards
    Indrek
    ๏ปฟ
    Getting started
    Algolia: across 15 languages, read up on Algolia concepts, get access to tutorials with concrete use-cases and sample datasets, or explore our API Reference.
    https://www.algolia.comdoc/guides/building-search-ui/getting-started/react/index.html
    ๏ปฟ


    0
    Like Comment
    2 comments
    admin

    Patrick Kilgore

    Joined Sep 2, 2020
    Engineer
    Chicago, IL
    ๐Ÿ‘‹
    Patrick Kilgore
    Posted in What's New?

    ๐Ÿ“ฑ PWA Install, Auto-update, and Wrapper

    We've added two new features to make your Draftbit publications better.ย 

    First, published apps now support offline installation with service workers! This additional PWA support provides a more integrated offline experience on iOS, Android, and desktop (via Chromium Browsers like Google Chrome, Microsoft Edge, and Brave).

    ๏ปฟ
    ๏ปฟ๏ปฟ
    ๏ปฟ
    As part of this update, we also added support for background updates. If you are using or developing the app in a browser or desktop installation, you will see a small notification when the new version of the app is ready to be installed:๏ปฟ
    ๏ปฟ
    On mobile, any new version will be downloaded in the background the next time you use the app, and installed and available once you close and reopen the app:๏ปฟ
    ๏ปฟ
    Second, when you view a published app on a non-mobile screen, your (usable) app will be wrapped in a phone frame, along with a name, description, and social links to help spread the word about what you've made!
    ๏ปฟ
    ๏ปฟ
    Don't worry! You'll have the same experience as before when viewing the app on mobile screens.
    Liked by Aman and 1 other
    Like Comment
    0 comments
    Icons/loader