Positioning button to bottom right corner

  • 1
  • Question
  • Updated 4 years ago
  • Answered
 We have a requirement to position button to bottom right corner rather than default position of top right  corner.  Any Idea?
Photo of Gyan

Gyan

  • 1,400 Points 1k badge 2x thumb

Posted 4 years ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
I assume you're using the table or field editory component.
  1. Disable the buttons on the table or field editor component.
  2. Add a Page Title component below table or field editor component.
  3. Choose the same model.
  4. Add the necessary button. Likely the default Save/Close button.
Photo of Gyan

Gyan

  • 1,400 Points 1k badge 2x thumb
Hi Pat,

That's a great idea. I am using wizard component and the button is running multiple actions, actually one action, 'run javascript snippet'.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Lots of people are using this stragety to move wizard buttons to the bottom of the page. 

https://community.skuidify.com/skuid/topics/go_to_next_wizard_step_from_mass_action
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
I assume the "Navigate to Step" action can be copied via XML as well.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Not sure what you mean by that Pat.  The XML node for Navigate to step buttons is only located in the title area of the wizard, so you can't just move that XML block to a page title.   But you can make a snippet that does that work for you. 
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
I mean this.
1. Create the wizard button.
2. Also create another button in a page title component at the bottom of the page.
3. Copy XML from wizard button into page title component button.
4. Remove the wizard button.
Photo of Gyan

Gyan

  • 1,400 Points 1k badge 2x thumb
Thanks Rob & Pat,

To position the button at the bottom right corner of the wizard

1.  I added a page title component after the wizard component
2. Removed the button from the wizard component
3. Added the component to the Page title component of type 'Run Multiple Actions'
4. Set margin-right property to 8px (default is 4px) to adjust the alignment
5. Added an action 'Run a Javascript Snippent' 
6. Called the same snippet that was called previously from wizard button
7. Got an error saying  something like ' can't read navigate of undefined' while javascript was trying to navigate to next step.

8. Gave the wizard component an id 'wizardId,
9. Get the wizard component using
     var wiz = skuid.component.getById('wizardId');
10. wiz.navigate('step2')
(Edited)
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Thanks for Documenting Jnanendra.  Glad you got it working.