1

Looking at building 3 screens and each has navigation between them using next, previous. Finish button to complete. I know that I could use Lighting Flows to navigate but I would not want to use it. I would like to go with creating custom navigation button which takes me to the respective page. I have two approaches as below. Was looking what does community think about which approach is good( if there is any other opinion please do let me know)

Approach 1)

Parent LWC:

<template>

<template if true > // show first page

<c-first-page.....></c-first-page>

</template>

<template if true > // shows second page

<c-second-page.....> </c-second-page> // Displays Questions and questions to be asked page

</template>

<template if true > // show 3rd page

<c-third-page.....></c-third-page>

</template>

<buttons>
Previous,Next,Cancel,Done
// button section will be displayed based on which page we are in
</button>

Approach 2)

Build 3 different LWC:

<c-first-page> , <c-second-page> and <c-third-page>

Each has button based on which order they appear. Example - first page will have next but last page will have finish

Use LWC PageReference Type - https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_page_reference_type to navigate between page. Previous and Next

Improve this question
2
  • 1
    Please don't add completely irrelevant tags. – Adrian Larson♦ Apr 1 '20 at 0:45
  • Apologies for that. Will keep that in mind. – SfdcBat Apr 1 '20 at 0:52
1

Both of the approaches will work. I personally will prefer approach 1 where Parent Component passes states down to other components.

For the second approach you will need aura components wrapping lwc and making it url:addressable. It can be difficult navigating through the code to find and maintain states.

The other thing to experiment with the approach 1 is to use Lightning Message Service. Note that this in BETA and has limitations highlighted here.

You cannot use LMS for appexchange or ISV apps yet and if you are building for mobile experience then this might not be the right choice because of limitations at this point.

Also if you are expecting more steps than 3 in future you might want to explore a state management solution like redux along with your lwc.

Improve this answer
5
  • Wondering why would I need to maintain the state in 2nd approach. My understanding is I will use wrapper classes for each page to store date required by the page- serialize it to JSON and pass it to next page. Every time I navigate I am going to get the data from apex controller and pass it. – SfdcBat Apr 1 '20 at 1:00
  • When you click on the buttons you might want to pass down events with current state and previous state that you want to persist in store. – Mohith Shrivastava Apr 1 '20 at 1:39
  • Do you know where i can find messageChannelName.messageChannel-meta.xml? trying to find out how I can add the metadata type to my org- developer.salesforce.com/docs/component-library/documentation/… – SfdcBat Apr 11 '20 at 22:01
  • 1
    @SfdcBat Please post as another question. Because i can answer as a comment but wont benefit the community. Thanks – Mohith Shrivastava Apr 11 '20 at 22:53
  • sure I will post – SfdcBat Apr 11 '20 at 23:49
0

I think, for this best suited feature is Lightning Flow.

First, You can create the three screens in the flow.

You can drag and drop the standard component or create your own component and put on the screen.

If you want this flow can be used in the lightning component. Refer below link

The best thing. this will automatically manage the Next and Previous feature.

You can try http://lwc-router.com/#/ for the navigation between components.

Thank you

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.