How do I create a master detail view?

I’ve just started using Draftbit and it seems super promising! I’m trying to prototype a news feed that’s pulling in articles from Airtable. I was able to follow the documentation to get that mostly working. I’m having trouble getting and mapping some of the data though. I think this may have to do with nested objects in the JSON?

The next thing I can’t seem to figure out is how to pass data from the list items to another screen. I created a screen with a WebView component, and when someone taps a card from the feed I’d like it to navigate to that view using the link that’s in the Airtable record for that view.

Any help would be greatly appreciated. Here’s a quick screencast if it helps frame the problem:

https://www.dropbox.com/s/7a8et0nyxtmsie5/Screen%20Recording%202019-12-30%20at%206.50.59%20PM.mov?dl=0

Hi,
@angela is status on this feature changed? Can we pass data from the list items to another screen (single view detail)?

Hey @Michael_Novia,

Sorry about the issue with nested data not working, I have added it to our issue board and we’ll try to fix it as soon as possible.

For your second issue, at the moment we don’t support navigation props which you would need to pass data to other screens when navigating. We plan to support navigation props in the future, but currently navigation props will have to be added manually outside of the builder.

The builder uses react-navigation under the hood so to add a param it would look something like this.

 Article List Page:     
<Button
              style={styles.Button_ng7}
              onPress={() => {
                this.props.navigation.navigate("ArticleWebViewPage",{articleLink: linkToArticleGoesHere})
              }}
            >
              Open Article
            </Button>

Page with web view
<WebView
          source={this.props.navigation.getParam('articleLink', 'DefaultArticleLink'))
          bounces={true}
          contentInset={{ top: 0, left: 0, right: 0, bottom: 0 }}
          scrollEnabled={true}
          scalesPageToFit={true}
          dataDetectorTypes={['phoneNumber']}
          allowsInlineMediaPlayback={false}
          mediaPlaybackRequiresUserAction={true}
          style={styles.webViewSe}
        />

For more info check out this link,

Let me know if you run into any issues!

We’re working on this currently, so stay tuned. :wink:

1 Like

Hi,

I’m trying to do this too, passing data to a detail screen with video url, video title, and tag data.

Here’s a short video showing what I’m trying to do:

I attempted to edit the code but wasn’t able to. I’m not sure if I’m doing it correctly.

Cheers,
Wynne

Hi Wynne,

So when you click the Export Project button @ 3:33 that should download a .zip file of your project to your computer. Also, any code editing inside of Draftbit would be done inside of the Custom Code modal under project settings (that was open at 3:58) instead of in the View Code modal.

To accomplish the detail view you’re trying to make, you would need to make those edits after exporting code. I’ve let the engineering team know it isn’t working and they will take a look!