Frappe UI - Child Tables

Frappe Framework App Development
,
1

Hi Team

I am creating a custom Vue App (with frappe ui). I have books which have child chapters - all set up in Frappe and i can display the chapters on the Book Details Page all good.

I would like to have a page per chapter in my app so then when you click on a row it takes you to this page. I can get the list view row to route to my /chapter/{name} but not sure how to then display the child row details. This is my part code but i get a permission error which might be because this code doesn’t work for children?

const chapterResource = createDocumentResource({
doctype: “Chapter”,
name: route.params.name,
auto: true,
parent: route.params.parent,
parenttype: “Book”
})

  1. Can you use createDocumentResource for child tables
  2. If not, how to do i get the doc to display the details
Chapter Detail page below:

<template>
	<div class="p-5">
		<div v-if="chapterDoc">
			<h1 class=" font-black text-gray-900 text-3xl">
				{{ chapterDoc.name }}
			</h1>



		</div>
	</div>
</template>

<script setup>
import { computed, watch, ref, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Button, createDocumentResource, FeatherIcon, ListView } from "frappe-ui";

const route = useRoute();

const router = useRouter();

const chapterResource = createDocumentResource({
	doctype: "Chapter",
	name: route.params.name,
	auto: true,
	parent: route.params.parent,
	parenttype: "Book"
})



const chapterDoc = computed(() => {
	if (chapterResource.doc) {
		return chapterResource.doc
	}
})


</script>
2

So I kinda solved this by sending both the book and chapter name/id to the new pages and then used document search for the Book and then find for the chapter.

Lots of code but I now have what I need. Any better way please let me know

3

Hi @benjamen:

IMHO, actually it’s well designed from security perspective, because permissions are give to parent doctype. Since FrappeUI resource functions are wrapping framework regular methods … and get_list can’t manage child tables, I think this is the desired behavior.

Maybe you can create backend endpoint to return child table data … but book object should returns all child data table, so … actually data is already on client side. I think is doable with routing.

Hope this helps.

1 Like