Creating multiple pages with similar functionality

Ionic Framework
1

Hi!

I’m not really used to app/web development. This doesn’t seem too hard to do, but I’m really not finding a good solution for my problem:

I’m building an app in which I have to create a bunch of pages that basically do the same. Let’s say I have A to Z “types of content”, and I have to create pages to Add, Edit and View each of those contents.

Like, the exhausting way would be to create AddA, …, AddZ, EditA, …, EditZ, ViewA, …, ViewZ. What I think would be a little smarter is to only have generic Add, Edit and View pages, and then create then accordingly. Having in mind the fields are different and can have different types of input, as well as a different function for the buttons.

As an example, let’s say I want to create the AddA page. “A” has a “name” field, which is input text, a “category” field which is a dropdown and the submit button calls a function to add the entry to my Database. I would like to go to page “Add” passing parameters like

{contentType: A},
{name: inputText},
{category: dropdown, options: [category1, category2]},
{button: {name: “Create A”, onClick: DatabaseService.CreateA(name, category)}}

I would love to have at least some guidelines to make this happen. A starting point is probably enough! :slight_smile:

2

Here is how I did something analogous for a Markdown renderer. The actual syntax in there is now several years old, but the basic idea should remain relevant.

It’s also not entirely out of the realm of possibility that you could do the entire thing with a single page - I have combined Add/Edit/View in the past, using readonly form inputs in the case of View and having a sentinel value in the backing business object (like id) to disambiguate Add/Edit. If we have an id, then we’re editing. If we don’t, we’re creating from scratch.

1 Like
3

Hi! Just wanted to thank you. I forgot to come back here after implementing. I combined your answer with another one I got on Reddit and it worked out perfectly! :slight_smile: