Crayons fw-select component manipulation

App Platform
,
1

Hi Community,

I am developing an app using Crayons. In the settings page of the app, we used multiple select crayons component.

How do we add values to the fw-select array in getconfigs method ?

It is very difficult to get values from Crayon Components.

Why there is not a direct way of getting select element’s value ?

Why do we need to use a method ? Can’t it be accessed like how we access normal DOM values with selectors?

Thanks.

1 Like
2

I don´t know the whys it is this way, but I had the same trouble and I resolved it creating all the element in runtime, that is, the fw-select and its fw-select-options… then you just need to append it to some div. Very easy using jquery.

5 Likes
3

Hi @samuelpares,

Could you please share the code snippet?

Thanks

1 Like
4

Sure!

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  </head>
  <body>
    <div id='mydiv'>
    </div>
  </body>
</html>

<script>
	const options = ["Option A", "Option B", "Option C"];

	$(document).ready(function () {
	  app.initialized().then(function (client) {
		createFwSelect();
		$("#mydiv").on('fwChange', 'fw-select', onMySelectChange)
	  });
	});

	function createFwSelect() {
	  var fwSelectOptions = "";
	  for (const option of options) {
		fwSelectOptions += "<fw-select-option value='" + option + "'>" + option + "</fw-select-option>";
	  }
	  $("#mydiv").append("<fw-select id='myselect' label='Business number'>" + options + "</fw-select>");
	}

	function onMySelectChange() {
	  // get selected option value
	  $(this).val()
	  // or
	  $("#myselect").val()
	}
</script>
5 Likes
5

Thanks @samuelpares.

6

Hi Arshath,

We have both the method and the property exposed for fw-select.

To get the selected value, you can use value attribute at any point of time to get the selected values. The method was provided as an extra feature.

Hope this solves your issue.
Do let us know if you face any issues.

Thanks!

3 Likes
7

Hi Asif, Thanks for your input.

I have used the value attribute to get selected elements. It would be nice if there is a way to set values for multi-select out of the box. I have used array methods to dynamically set values for the multi-select element. But the downside is we need to re-render the multi-select whenever we want to manipulate the multi-select values.

Thanks!

8

Got your point Arshath.
Its a good feature request.
Can you create an issue in the Github Repo so that we can track this?

Thanks!

1 Like
9

Thanks @Asif. I have added this to github issues.

1 Like